Question

foo.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <table>
        <tr>
            <td id="tdTxtBox"><input type="text" id="txtBox"/></td>
            <td id="tdChkBox"><input type="checkbox" id="chkBox"/></td>
        </tr>
    </table>
<script src="foo.js"></script>
</body>
</html>

foo.js

$('#txtBox').on('blur', function(){
    console.log('came out of text box');
});

$('#chkBox').on('click',function(){
    console.log('checked check box');
});

正常流程：在文本框中输入一个值，单击复选框，这实际上会触发文本框中的“模糊”和复选框上的“单击”。这输出：

came out of text box
checked check box

在改变 foo.js 之后：

$('#txtBox').on('blur', function(){
    console.log('came out of text box');
    $('#tdChkBox').html('<input type="checkbox" id="chkBox"/>');
});

$('#chkBox').on('click',function(){
    console.log('checked check box');
});

输出：

came out of text box

这是有道理的，因为在blur我实际上用另一组dom元素重置了#tdChkBox，jquery无法跟踪复选框的引发事件click（这是正确的理解吗？）

我在SO Post中找到了解决此问题的方法，使用setTimeout推迟更改html，这将使click事件处理程序执行如下：

foo.js

$('#txtBox').on('blur', function(){
    console.log('came out of text box');
    setTimeout(function(){
        $('#tdChkBox').html('<input type="checkbox" id="chkBox"/>');
    },100);
});

$('#chkBox').on('click',function(){
    console.log('checked check box');
});

问题在于，setTimeout的 100 ms有效，但 0 ms不起作用。显然， T 需要 T 来提升click事件并将其注册到 jquery事件队列。分配给setTimeout的时间必须大于 T 。

此解决方案不是完整的证据。如果明天会花费超过 100 ms怎么办？如果我增加这个时间让 1000 ms，它的可用性就会受到影响。

如何正确处理此问题？理解是正确的还是我缺少一些基本的东西？

如果这是一个标准的jquery / javascript问题，有人可以指出我正确的方向。

Answer 1

尝试使用mousedown而不是点击。在blur之前执行。Blur在mouseup上运行，这意味着点击已完成

$('#txtBox').on('blur', function(){
    console.log('came out of text box');
});

$('#chkBox').on('mousedown',function(){
    console.log('checked check box');
});

工作示例

$('#txtBox').on('blur', function() {
  console.log('came out of text box');
});

$('#chkBox').on('mousedown', function() {
  console.log('checked check box');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="tdTxtBox"><input type="text" id="txtBox" /></td>
    <td id="tdChkBox"><input type="checkbox" id="chkBox" /></td>
  </tr>
</table>

如何正确推迟dom元素更改，直到jquery

1 个答案: