Question

所以我使用ajax加载我的页面，使用下面的一切工作正常

$( document ).ready(function() {
    menuLoad('auction');
});

function menuLoad(page){    
    $.ajax({
        type: 'post',
        url: '/content/'+page+'/'+page+'.php',
        async : false,
        success: function (response) {
            location.hash = page;
            $("#contentLoad").html(response);
        }
    })
};

但是如果我尝试多次加载同一页面，所有按钮点击事件都会多次激活..我明白每次加载内容时，我都会重新为按钮指定一个新事件一个导致每个事件在用户点击时触发的一个..但是如何解决这个问题？

内页内容，按钮将如下所示

<input type="button" value='New Sold' id='soldaddbtn' >

$( document ).on("click", "#soldaddbtn", function(){
    $.ajax({
        type: "POST",
        url: "/content/sold/loadSoldAdd.php",
        dataType: 'html',
        success: function(response){
            bootbox.dialog({message: response});
        }
    });
})

Answer 1

其javascript而不是java，您需要触发一次事件，替换

$( document ).on("click", "#soldaddbtn", function(){

与

$("#soldaddbtn").on("click", function(){

Answer 2

定义一个全局变量并检查它的存在。

if(!soldaddbtnClickEventisAdded) { // check if the variable is defined file is already loaded
    $( document ).on("click", "#soldaddbtn", function(){
        $.ajax({
            type: "POST",
            url: "/content/sold/loadSoldAdd.php",
            dataType: 'html',
            success: function(response){
                bootbox.dialog({message: response});
            }
        });
    });
}

var soldaddbtnClickEventisAdded = true; // add a global variable

Answer 3

我完全不了解您的问题，但请尝试使用以下代码：

因为on（）将绑定click事件，所以可能存在事件多次有界的情况。因此取消绑定click事件然后再绑定它。

$("#soldaddbtn").off("click").on("click", function(){});

页面内容加载了ajax - 多次触发事件

3 个答案: