Question

＆＃13;

$(":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();

＆＃13;

<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>

＆＃13;

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

在按钮上注册了单击事件
在输入字段中注册更改事件

onChange 将触发AJAX服务器调用，结果将替换部分网页 - 包括按钮。处理完AJAX结果后，将再次注册所有侦听器。

现在问题。用户更改输入字段的值，并直接单击按钮 - 但要减慢（假设用户需要500毫秒的点击），因此 onChange 事件被触发，页面为＆＃ 34;更新/替换＆＃34 ;.现在＆＃34; old＆＃34;按钮会触发 onMouseDown 和＆＃34; new＆＃34;按钮会触发 onMouseUp 事件 - 但没有 onClick 。

我目前的解决方法是，注册两个 mouseDown / mouseUp 事件，获取鼠标按下的时间戳，如果鼠标按下2秒，则执行应该通过 onClick 完成什么。从AJAX响应中删除按钮部分是没有选择的 - 在最坏的情况下，按钮可以被移除并替换为用户信息。

我的希望是，有更好的解决方案......任何想法？

Answer 1

您可以利用事件委派并在容器上设置侦听器而不是按钮。

您正在向旧按钮添加点击侦听器，并向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提供了一个可以用于事件委派的甜蜜API。这样我们就不必手动检查事件目标。查看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();

失去＆＃34;点击＆＃34; AJAX刷新期间发生的事件

1 个答案: