Question

第一次点击时myClick()已再次调用myLoad()，然后在第二次点击时，此myClick()将执行两次

=＆GT;以下导致两次后续执行点击#myBtn点击事件

如何避免或阻止这种情况？请有人建议我采用新的逻辑方法或以何种方式阻止这种情况。

$(function() {
  myLoad()
})

function myClick() {
  $("#myBtn").click(function() {
    myLoad(); //load new every click
  });
}

function myLoad() {
  $("#myCnt").load('ajax.php', {
    "data": "some"
  }, function() {
    myClick() //to live the click event works after ajax load
  })
}

Answer 1

问题在于您的代码流程

第一次拨打myClick()时，它会将点击事件与#myBtn绑定，

第二次它再次绑定该事件，因此它将被调用两次，从那里删除该事件绑定，

否则每次调用myClick函数时都会绑定$("#myBtn").click。

作为解决方案，请尝试以下代码：

$(function(){
  myLoad()
})

$("body").on( "click" , "#myBtn" , function(){
    myLoad();//load new every click
});

function myLoad(){
  $("#myCnt").load('ajax.php', {"data":"some"}, function(){
    $("#myBtn").trigger("click");
  })
}

Answer 2

您的实现问题在于，在每次调用myClick()时，都会在按钮上附加一个新的事件处理程序。

您可以使用.off()删除使用.on()附加的现有事件处理程序。

function myClick(){
  $("#myBtn").off('click').on('click', function(){
    myLoad();//load new every click
  });
}

更好的方法是在动态生成元素时使用.on()方法和Event Delegation方法。

一般语法

$(document).on('event','selector',callback_function)

代替document，你应该使用最近的静态容器。

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序。

好读Direct and delegated events

将代码修改为

$(function() {
  myLoad();

  $(document).on("click", "#myBtn", function() {
    myLoad(); //load new every click
  });

})

function myLoad() {
  $("#myCnt").load('ajax.php', { "data": "some"}, function() {
    //No need to call my click
  })
}

js在自身的ajax中回调后停止点击功能后续执行

2 个答案: