我是一个 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 中,并将折叠的东西卡在上面。完成,工作,非常不满意。
但我仍然不明白为什么这是必要的。这是我认为损坏的代码应该做什么的心智模型。
- 好的,文档加载完成!让我们执行我们的代码!
- 第一行:让我们获取此文件并将其添加到 DOM。这在世界上以状态的形式出现,现在我们要改变它,就像改变状态一样。
- 好的,现在它是 DOM 的一部分。我们完成了那条线。让我们转到下一行。
- 好的,现在我们要将一堆事件监听器连接到类崩溃的所有内容。太棒了,让我们看看 DOM 的当前状态。嘿,看,崩溃类里面有所有这些东西。砰。连接起来。
除了 4 从未发生过,因为第二行代码显然看不到第一行添加的所有内容。
直觉上,这有两个似是而非的原因:
第二行在第一行完成获取文件之前执行。如果这是真的,那么我学到了一些关于 javascript(或 jquery、ajax 或其他东西)的重要知识:行并不总是执行按顺序,或者至少不要总是在下一个开始之前完成。
第一行实际上根本没有改变任何状态。 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/