元素加载上的 jQuery 触发器不起作用答案

【问题标题】：jQuery Trigger on Element Load Not Working元素加载上的 jQuery 触发器不起作用
【发布时间】：2020-12-09 21:11:03
【问题描述】：

我正在使用单页应用程序。

在最后一步，我想根据在 SPA 的最后一步加载的元素触发一个事件。

当我使用这样的功能时：

if ($('.order_details.curve_panel').length >=1) {

alert('it worked');

}

它可以在元素加载后在控制台中运行。但是，当我将代码插入 HTML 时，它实际上并没有触发事件（在这种情况下是警报）。

但是，当我使用 .load 方法时什么都没有

$('.order_details.curve_panel').load(function() {

alert('it worked');

});

我错过了什么吗？ SPA 是否会导致此问题，是否有一种方法可以在元素加载后尽快触发事件？

以下是 HTML 示例。 "class= "order_details curve_panel" 直到我的 SPA 的最后一步才会出现。它不会在页面加载时加载，因为它是单页应用程序的一部分。它仅在用户进入 SPA 的最后一步后加载. 在页面加载时，它不可用。

<div class="order_details curve_panel">
   <div class="shiptoexpanded">
      <div>3 / 15</div>
      <div group-key="Shipping 12/2/2020">
         <div class="shipSort">20201202</div>
         12/2/2020
      </div>
      <div group-key="">$53.11</div>
      <div group-key="">$159.33</div>
      <div group-key="">$11.10</div>
      <div group-key="">$170.43</div>
   </div>
</div>

当这出现时，我需要触发一个事件……现在我只是想触发一个警报。

【问题讨论】：

您是否混淆了.load() ajax 的简写方法和加载事件？试试$('.order_details.curve_panel').on("load", function() {
@LouysPatriceBessette，很可能我把它弄糊涂了。我会很快尝试的。感谢您的帮助！
@LouysPatriceBessette，看起来不起作用。我相信这是因为元素在“屏幕”加载时不可用，因为它是单页应用程序。我相信代码在元素可用之前运行，所以当它们可用时它不会触发。根据 .on 文档：“事件处理程序仅绑定到当前选定的元素；它们必须在您的代码调用 .on() 时存在。为确保元素存在并且可以选择，请将脚本放在HTML 标记中的元素”
好的...然后尝试委托：$(window).on("load", ".order_details.curve_panel", function() { 如果可行，我将发布答案。
是的，<div>s 没有加载事件

标签： javascript html jquery event-handling single-page-application

【解决方案1】：

当页面加载所有 DOM 元素时尝试使用您的脚本

window.addEventListener('load', ()=> {
   if ($('.order_details.curve_panel').length >=1) {
      alert('it worked');
   }
})

【讨论】：

【解决方案2】：

我能够弄清楚。代码需要不断检查元素，因为它在单页应用程序页面加载后可用。使用 setInterval 和 clearInterval，我就可以完成触发了。

(function(d) {
    var interval;

    function check() {

        if ($('.order_details.curve_panel').length >= 1) {
            alert('it worked');

            clearInterval(interval);
        }
    }
    interval = setInterval(check, 100); // duration: 100ms
}(document));

【讨论】：

【解决方案3】：

我不知道 .load 来自 jquery 的作用，但也许你必须使用突变观察者：https://developer.mozilla.org/de/docs/Web/API/MutationObserver

希望对你有所帮助！

好吧，我不知道为什么我得到了 -1，但也许我需要再解释一下：

这是一个单页应用程序，因此整个页面上的加载事件没有意义，因为 javascript 仍然可以向 DOM 添加元素
如果你尝试你的代码

$('.order_details.curve_panel').load(function() {

alert('it worked');

});

并且那个时候元素不存在 $('.order_details.curve_panel') 什么都找不到。

这就是为什么你需要一个变异观察者来检查元素是否被添加，然后对它做出反应

【讨论】：