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

Question

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

=>以下原因导致#myBtn的click事件通过单击两次连续执行两次

如何避免或阻止这种情况？ 请任何人建议我一种新的逻辑方法或停止这种情况的方法。

$(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()它将click事件与#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()的每次调用中，新的事件处理程序都附加到button。

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

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

---

一种更好的方法是在动态生成元素时将.on()方法与事件委托方法一起使用。

一般语法

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

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

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

良好阅读直接事件和委托事件

将您的代码修改为

$(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
  })
}