当单击 jsp 中的按钮时，它会再次调用 js 中的 ready 函数。错误

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中的就绪函数。不调用 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.

如果您在 form 元素中有 btnViewAll 按钮，则每次单击按钮都会提交该表单，因此会重新加载页面，因此请添加

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

在你的

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

防止表单提交的功能。或者，如果您没有进行任何表单提交（仅 ajax 类型的 POSTing），那么您可以简单地删除表单元素。

Answer 2

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

当单击 jsp 中的按钮时，它会再次调用 js 中的 ready 函数。错误

When click a button in jsp it again call ready function in js. Error

javascript

ajax

jquery

jsp

spring-mvc