gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:44:05 24 4
gpt4 key购买 nike

我是一个 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。

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

最佳答案

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 稍后在加载时放入其中。

关于javascript - js 新手试图通过 ajax 混淆来理解 dom(概念),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33275228/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com