Question

我在jsp中有一个按钮

<button id="btnViewAll">View All</button>

当我点击它时，我想在js中调用viewAllInventory（）函数。

function viewAllInventory() {
$.ajax({
    url : "/GradleSpringMVC/inventory/viewAll",
    type : 'POST',
    dataType : 'json',
    data : JSON.stringify(populateViewAllParam()),
    contentType : 'application/json',
    mimeType : 'application/json'
}).done(
        function(response) {
            createInventoryTable(response);
        }).fail(function(error) {
    // parseToPageAlerts(error.responseText);
}).always(function() {
    // hideLoading()
});}

但是当我调试js文件时。它再次调用js中的ready函数。不要调用viewAllInventory函数。

我在js中的准备功能是

$(document).ready(function() {
$("body").off("click", "#btnAdd").on("click", "#btnAdd", doAdd);
$("body").off("click", "#btnClear").on("click", "#btnClear", doClearAll);
$("body").off("click", "#btnSearch").on("click", "#btnSearch", doSearch);
$("body").off("click", "#btnDelete").on("click", "#btnDelete", deleteRow);
$("body").off("click", "#btnViewAll").on("click", "#btnViewAll", viewAllInventory);
 });

所有ajax调用都运行良好，我想正确地使用此行

$("body").off("click", "#btnViewAll").on("click", "#btnViewAll", viewAllInventory);

任何人都可以给我一个想法，为什么会这样？

Answer 1

我尝试了你的代码，它对我有用。我认为这个问题可能在你的HTML中。

如果您在表单元素中有 btnViewAll 按钮，则每个按钮点击提交该表单，因此重新加载页面以添加

$('form').submit(function(e){
    e.preventDefault();
});

中的

$(document).ready(function() { 
......
......
}

功能，以便您可以阻止表单提交。或者如果您没有进行任何表单提交（只有ajax类型POST），那么您只需删除表单元素即可。

Answer 2

我们可以通过将<button id="btnViewAll">View All</button>更改为<button type="button" id="btnViewAll">View All</button>来解决此问题。我们需要添加type="button"，否则会将其识别为提交按钮。

当点击jsp中的一个按钮时，它再次在js中调用ready函数。错误

2 个答案: