Javascript 嵌套$（document）.ready（）

我有一个简单的网页与一个单一的按钮

使用jQuery 3.3.1，此按钮会附加一个“单击”事件，这样一旦单击此按钮，下一个单击页面上的任意位置（

文档

）就会发出

警报（'clicked！'）

。

这可以按预期工作，但我仍然无法推断这样的行为：为什么我需要包含嵌套的

$（document）.ready（）

---

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

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

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

您可以在下面的代码段中看到这一点：

$（文档）.ready（函数（）{
$（“#Btn”）。单击（功能（e）{
e、 停止传播（）；
$（文档）。单击（函数（）{
警报（“单击！”）；
$（文档）。取消绑定（“单击”）；
});
});
});

点击
这很有道理。那么我问题中的第二段代码呢？为什么编写嵌套的
$（document）.ready（）
会提供所需的行为？@benTen您使用的是哪种浏览器？我在Chrome 69中尝试了你的第二个代码片段，它的工作原理与第一个类似，即单击按钮后立即显示单击的警报。我也使用相同版本的Chrome。对你是对的。第二个代码段的行为与代码中使用的
jquery2.1.1
相同。我使用的是
jquery3.3.1
：。它有不同的行为。请用那个检查一下。通过提到jQuery版本更新了问题。@benTen很好！看起来这是因为。文档注意到，对于3.0+版本，将异步调用文档就绪处理程序。因此，在您的情况下，事件处理程序不会立即绑定到文档元素。我认为这允许事件在绑定该事件之前向上传播调用堆栈。
<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>

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