js 新手试图通过 ajax 混淆来理解 dom（概念）答案

【问题标题】：js newbie trying to understand the dom via ajax confusion (conceptual)js 新手试图通过 ajax 混淆来理解 dom（概念）
【发布时间】：2016-01-21 09:21:11
【问题描述】：

我是一个 python/data 人，在一些网络上闲逛，对 JS 和 dom 以及所有这些基本上一无所知。所以发生了一些非常奇怪的事情，即使我找到了解决方案，我也试图了解其中的机制。

场景：常见问题

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

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

这发生在我身上，我花了大约一个小时阅读以前的 SO 并了解事件委托，确实，它救了我，我的代码也能正常工作。

但我不明白为什么它一开始就坏了。因此，我希望有人可以向我解释基本理论，这样我将对整个 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 中，并将折叠的东西挂在上面。完成，工作，非常不满意。

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

好的，文档加载完毕！让我们执行我们的代码吧！
第一行：让我们获取这个文件并将其添加到 DOM。这在世界上以 state， 的形式存在，现在我们将对其进行变异，就像对 state 所做的那样。
好的，现在它是 DOM 的一部分。我们已经完成了那条线。让我们转到下一行。
好的，现在我们想将一堆事件侦听器连接到类崩溃的所有内容。酷，让我们来看看 DOM 的当前状态。嘿，看，collapse 类里面有所有这些东西。巴姆。挂了。

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

直觉上，有两个可能的原因：

第二行在第一行完成获取文件之前执行。如果这是真的，那么我学到了一些关于 javascript（或 jquery、ajax 或其他东西）的重要知识：行并不总是执行按顺序，或者至少不要总是在下一个开始之前完成。
第一行实际上并没有改变任何状态。 DOM 不是状态。它是别的东西，是什么……甚至是不可变的？第一行完全修改了其他东西，第二行无法触及，因为它试图修改 DOM。

老实说，这两种可能性对我来说似乎有点奇怪。但很明显，我根本不明白这里的幕后发生了什么。有人可以帮我吗？

【问题讨论】：

标签： javascript jquery ajax dom

【解决方案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');
        });
    });
});

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

为什么您的原始破解解决方案确实有效？它将事件处理程序附加到现有的外部 div，加载的 HTML 稍后在加载时放入。

【讨论】：

委派事件实际上非常优雅，并且更容易使用代码，因为委派会在新元素到达 dom 时监听它们，这使得将相同的事件重新绑定到不同的元素是多余的
@SidneyLiebrand 之所以被认为是 hack，是因为被监听的行为与被监听的元素不同，并且在将事件监听器添加到包装器的情况下，它不是语义上正确，即使它有效。

【解决方案2】：

您的第一个假设是正确的。当调用 ajax 时，它是异步的，这意味着它会在完成时运行回调。在这种情况下，jquery 已经调用了一个回调来将内容附加到 div 中，但这会在大约 100 到 200 毫秒的延迟之后发生。

然而，其他代码可以立即运行，但由于异步调用尚未完成而找不到任何内容。

在 jQuery 中，如果您查看 load 的文档，您会看到类似于 (arg1, [arg2], [complete]) 的内容，其中 complete 将是一个闭包或回调函数。

如果您将代码包装在该回调函数中而不是在其下方，则该代码将在内容加载和添加后执行。

编辑

加载load也是jquery中的一种方便/简写方式。更多文档请查看Ajax

此外，DOM 是非常可变的，并且您执行请求的第一行确实对 dom 执行了操作。由于它是异步的，它会告诉脚本在等待其数据时继续运行，这就是它失败的原因。

希望这对升技有所帮助！你得到了正确的图片:)

【讨论】：

所以这就是在这种情况下异步意味着什么！现在一切都清楚了。 :-)
如果您需要更多信息，请随时询问:)

【解决方案3】：

如果我理解正确，您应该仅在“完成”回调时引用新加载的 DOM。看这里：

http://api.jquery.com/load/

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

【讨论】：

【解决方案4】：

第一行确实被执行了，它改变了状态。之后，您将一个事件与更改挂钩，每次发生更改时都会调用该事件，但不是第一个，因为它在事件挂钩之前就已经发生了。

【讨论】：

【解决方案5】：

jQuery.load 是异步的，这意味着您需要在通过回调添加内容后提供任何代码来执行。 the documentation page 底部有一个工作示例。

【讨论】：

【解决方案6】：

正如其他人所说，JavaScript 在执行以下行之前不会等待完成加载函数。因此，您可以使用加载函数（或任何其他需要时间的函数，如 AJAX 或动画）的回调参数。所以你的第一个假设是正确的。 AJAX（异步 JS）是一件大事，你应该深入研究它:)

此外，您仍然可以在您的情况下使用委托：

$(document).on('show.bs.collapse', '.collapse', function () {
    var collapse = $(this); // the individual $('.collapse') element triggering the event
});

这会将show.bs.collapse 事件绑定到所有.collapse 元素，无论它们现在存在还是以后添加。这里的原始选择器是 $(document)。简单来说：

“嘿，文档，每当事件show.bs.collapse 被选择器'.collapse' 的元素触发时，运行以下代码。”

您可以区分直接和间接事件委托或绑定。在您的示例中，您使用直接绑定，因为您最终会选择所有现有的 .collapse 元素，然后对它们进行处理：

$('.collapse').on()

您必须了解，这仅适用于在运行该行时选择的当前现有元素。这不适用于同一类的动态添加元素。

【讨论】：