javascript - AJAX 刷新期间丢失 "click"事件

Question

$(":input").on("change", function(e) {
  console.log("change triggered");
	$("#section").html("<button id='order'>Order</button>");
  registerButtons();
});

function registerButtons() {
  $("#order").on("click", function(e) {
 	  console.log("click triggered");
  	alert("Hello World");
  });
  $("#order").on("mousedown mouseup", function(e) {
 	  console.log(e.type + " triggered");
  });
}

registerButtons();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="123"/>
<div id="section">
  <button id="order">Order</button>
</div>

我有一个带有按钮和一些输入字段的网页。

• 在按钮上注册了一个点击事件
• 在输入字段上注册更改事件

onChange 将触发 AJAX 服务器调用，结果将替换网页的部分内容 - 包括按钮。 AJAX结果处理完毕后，所有监听器都会重新注册。

现在问题来了。用户更改输入字段的值，然后直接单击按钮 - 但速度较慢(假设用户单击需要 500 毫秒)，因此会触发 onChange 事件，并且页面会“更新”/替换”。现在，“旧”按钮触发 onMouseDown 事件，"new"按钮触发 onMouseUp 事件 - 但没有 onClick 事件。

我当前的解决方法是，注册两个 mouseDown/mouseUp 事件，获取鼠标按下的时间戳，如果鼠标弹起在 2 秒内出现，则执行以下操作onClick 应该做什么。无法从 AJAX 响应中删除按钮部分 - 在最坏的情况下，按钮可能会被删除并被用户信息替换。

我的希望是，有更好的解决方案......有什么想法吗？

Answer 1

您可以利用事件委托(delegate)并在容器而不是按钮上设置监听器。

您正在向旧按钮添加一个点击监听器，并向 dom 添加一个新按钮。所以点击不起作用。

该按钮不起作用，因为由于某种原因，当您将鼠标悬停在其上时它无法聚焦。所以我添加了一个 getFocus 方法，现在它应该可以工作了。

$("input").on("change", function(e) {

    console.log("change triggered");

    $("#section").html("<button id='order'>Order</button>");

});


function registerButtons() {
   
  $('#section').on("mouseup", '#order', function(e) {
       
        alert('Clicked!');
 });

}

registerButtons();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="123"/>
<div id="section">
  <button id="order">Order</button>
</div>

我刚刚发现 jQuery 提供了一个很棒的 AP​​I，可以用于事件委托(delegate)。这样我们就不必手动检查事件目标。看看http://api.jquery.com/on/

$("input").on("change", function(e) {
  console.log("change triggered");
    $("#section").html("<button id='order'>Order</button>");
});


    function registerButtons() {
      $("#section").on("click", '#order', function(e) {
            console.log("click triggered");
            alert("Hello World");
     });

    $("#section").on('mouseover','#order', function(e){
            $(this).focus();
    });
}

registerButtons();