javascript - js 新手试图通过 ajax 混淆来理解 dom(概念)

Question

我是一个 python/数据的人，在一点网络上四处闲逛，对 JS 和 dom 等等一无所知。所以发生了一些非常奇怪的事情，即使我找到了解决方案，我也在努力理解其中的原因。

场景:常见问题

之前有大约一百万个 SO 问题是这样的:“我有一些工作的 jQuery/JS 可以操纵一些 HTML。然后我没有对相关的 HTML 进行硬编码，而是以编程方式在其他地方创建它并将其拖入AJAX。突然间一切都崩溃了。”

总是，答案是这样的:“你不能那样做。将你的代码连接到父子链的更高层，事件委托(delegate)是一个神奇的东西，它会拯救你。”

所以这发生在我身上，我花了一个小时左右的时间阅读以前的 SO 并了解事件委托(delegate)，事实上，它救了我，我的代码也能正常工作。

但我不明白为什么它一开始就坏了。所以我希望有人能向我解释基本理论，这样我就会对整个 dom 位有更深入的了解。

一些损坏的代码

$(document).ready(function(){

$("#autopubs").load("pubslist.html");
// Obviously, the stuff in pubslist.html is what the next line was 
// supposed to work on
$('.collapse').on('show.bs.collapse', function () {
    $('.collapse.in').collapse('hide');
});
});

这个解决方案可能并不令人意外。将 autopubs 包裹在一个外部 div 中，并将折叠的东西卡在上面。完成，工作，非常不满意。

但我仍然不明白为什么这是必要的。这是我认为损坏的代码应该做什么的心智模型。

1. 好的，文档加载完成!让我们执行我们的代码!
2. 第一行:让我们获取此文件并将其添加到 DOM。这在世界上以状态的形式出现，现在我们要改变它，就像改变状态一样。
3. 好的，现在它是 DOM 的一部分。我们完成了那条线。让我们转到下一行。
4. 好的，现在我们要将一堆事件监听器连接到类崩溃的所有内容。太棒了，让我们看看 DOM 的当前状态。嘿，看，崩溃类里面有所有这些东西。砰。连接起来。

除了 4 从未发生过，因为第二行代码显然看不到第一行添加的所有内容。

直觉上，这有两个似是而非的原因:

1. 第二行在第一行完成获取文件之前执行。如果这是真的，那么我学到了一些关于 javascript(或 jquery、ajax 或其他东西)的重要知识:行并不总是执行按顺序，或者至少不要总是在下一个开始之前完成。

2. 第一行实际上根本没有改变任何状态。 DOM 不是状态。它是别的东西，东西......甚至可能是不可变的？第一行完全修补了其他东西，第二行无法触及的东西，因为它试图修补 DOM。

老实说，这两种可能性对我来说都有些奇怪。但显然有一些我根本不理解的事情发生在引擎盖下。有人可以帮助我吗？

Answer 1

JavaScript 大量使用异步行为。行在同一函数内按顺序执行，但这并不意味着它们“完成”了它们的操作。

如果您查看load (http://api.jquery.com/load/) 的文档，您会发现它采用可选的complete 参数。那是一个回调。这是一个将在操作完成时运行的函数。调用 load 本身只会让加载开始，有点“在后台”。

所以你可以这样做:

$(document).ready(function(){

    $("#autopubs").load("pubslist.html", function() {
        $('.collapse').on('show.bs.collapse', function () {
            $('.collapse.in').collapse('hide');
        });
    });
});

加载回调在加载完成后运行。

为什么您最初的 hack-solution 确实有效？它将事件处理程序附加到现有的外部 div，加载的 HTML 稍后在加载时放入其中。