javascript - 如何将 onClick 事件设置为延迟加载的图形或图像元素

Question

嗯，我正在尝试在图像上使用 jQuery 设置 onClick 事件，以便在左键单击它后在另一个选项卡上打开它。 但看起来是因为 website有lazy loading图像，我的脚本不起作用。即使有很棒的waitForKeyElements script ，大多数时候，当页面包含 AJAX 内容时，我无法实现我正在寻找的内容，这可以拯救我。

请检查下面我的代码:

// ==UserScript==
// @include     https://revista*.globo.com/*.html
// @version     1.0
// @require     https://code.jquery.com/jquery-2.2.3.min.js
// @require     https://gist.githubusercontent.com/BrockA/2625891/raw/9c97aa67ff9c5d56be34a55ad6c18a314e5eb548/waitForKeyElements.js
// @grant       GM_openInTab
// @run-at      document-idle
// ==/UserScript==

waitForKeyElements("image.lazy-loaded.lazy-loaded", clickableImage, false);

function clickableImage (jNode) {

     jNode.each ( function () {
         var jThis = $(this);
         console.log( JSON.stringify( jThis ) );
         var imgLink = jThis.prop ("data-src");
         console.log( imgLink );

         jThis.on( "click", function() {

             GM_openInTab(imgLink);

         });


     } );

}

我正在使用 Firefox v68.0.1 和 Tampermonkey v4.9.5941

提前致谢。

<小时/>

如 this answer from the duplicate question explains和评论，我通过下面的代码实现了我的预期

waitForKeyElements("image.lazy-loaded.lazy-loaded", clickableImage, false);

function clickableImage (jNode) {

     var imgLink = jNode.data ("src");   
     jNode.on( "click", function() {

         GM_openInTab(imgLink);

     });
};

Answer 1

您可以使用 on 将事件处理程序绑定(bind)到尚不存在的元素。例如，如果最终可以使用 jQuery 选择器 .lazy-loaded 找到元素，那么您可以在已经存在的父元素(如 body)上绑定(bind)一个事件处理程序，并且事件将被捕获当它们最终冒泡时的处理程序:

$("body").on("click", ".lazy-loaded", function() {
  alert("clicked");
});