嵌套 $(document).ready()

Question

我有一个带有单个按钮的普通网页。

使用 jQuery 3.3.1，一个 'click' 事件附加到此按钮，这样一旦单击此按钮，next 单击页面上的任意位置 (document) 生成 alert('Clicked!')。

<div id="container">
    <button id="Btn">Click</button>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#Btn").click(function() {
            $(document).click(function() {
                alert("Clicked!");
                $(document).unbind('click');
            });
        });
    });
</script>

但是使用此代码，第一次 单击按钮本身会使 alert('Clicked!')。

我稍微更改了代码并将 'click' 事件附加到 $(document) 嵌套的 $(document).ready() :

<script type="text/javascript">
    $(document).ready(function() {
        $("#Btn").click(function() {
            $(document).ready(function() {   // <--here
                $(document).click(function() {
                    alert("Clicked!");
                    $(document).unbind('click');
                });
            });
        });
    });
</script>

这按预期工作，但我仍然无法推断出这种行为：为什么我需要包含嵌套的 $(document).ready()？

或者是否有任何其他方法可以实现所需的功能？

Answer 1

您的第一个代码段在第一次单击按钮时生成警报的原因是事件传播，特别是 event bubbling。单击按钮时，在事件处理程序执行后，同一事件向上传播 DOM 树；最终它到达文档元素，并触发您订阅的新事件处理程序。

确保事件不会立即在文档中触发的方法之一是通过调用 event.stopPropagation() 来防止事件传播。

您可以在下面的代码片段中看到实际效果：

$(document).ready(function() {
  $("#Btn").click(function(e) {
    e.stopPropagation();
  
    $(document).click(function() {
      alert("Clicked!");
      $(document).unbind('click');
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button id="Btn">Click</button>
</div>

嵌套 $(document).ready()

Nested $(document).ready()

javascript

jquery

document-ready