jQuery-将加载事件附加到动态加载的元素

jQuery - Attaching load events to the dynamically loaded elements

本文关键字：加载 动态 元素 事件 jQuery-      更新时间：2024-05-17

我有一组元素，这些元素被加载并动态注入DOM。我有一个脚本，它需要完全加载元素才能正常工作。假设以下代码：

$(".element").width();

如果将其放入$(document).ready()中，则可以正常工作。但我的场景有点不同，元素是动态加载到页面中的；因此，我需要$(".element")上的加载事件，它本身是动态加载的。现在：

$(".element").load()

不起作用，因为默认情况下它没有加载到页面中，我使用了$("body").on("load", ".element", function(){...});

但无济于事，它仍然毫无作用。我现在该怎么办？

我的问题：我应该如何将加载事件绑定到动态创建的元素。

动态监听通过AJAX添加的特定元素

每当收到成功的AJAX响应时，就会触发ajaxSuccessDocs
让我们使用它，看看是否有任何特定的选择器添加到DOM 中

jsBin示例

想象一下这个琐碎的HTML:

<button>Load something</button>
<div id="receiver"></div>

我们想在button点击时将内容加载到#receiver中：

$("button").on("click", function(){
  $("#receiver").load("page.html");  
});

首先是一些魔术：

// Elements load listener
var listenElementLoad = function(selector, callback) {
  var $ex = $(selector);
  $(document).ajaxSuccess(function(event, xhr, settings) {
    var $html = $(xhr.responseText),
        $ch = $html.find(selector),
        $el = $html.is(selector) ? $html : $ch[0] ? $ch : null;
    if($el) return callback( $(selector).not($ex) );
  });
};

当一个所需的选择器（元素）被添加到我们的DOM时，下面的调用将在任何时候触发，并检索它：

// Listen for newly added class ".element"
listenElementLoad(".element", function( $el ) {
  $el.css({color:"red"});
});

jsBin示例

即使它被弃用，请参阅DOMNodeInserted，您也可以使用此事件来检测新创建的元素：

window.onload = function() {
  document.body.addEventListener("DOMNodeInserted", function (e) {
    alert('New ele created: ' + e.target.outerHTML);
  }, false);
  document.getElementById('addNewElements').addEventListener('click', function(e) {
    var lis = document.querySelectorAll('li');
    var nextValue = +lis[lis.length - 1].textContent;
    var node = document.createElement("LI");
    var textnode = document.createTextNode(nextValue + 1);
    node.appendChild(textnode);
    document.querySelectorAll('ul')[0].appendChild(node);
  });
}
<div>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>
<p>This is a paragraph</p>
<button id="addNewElements">Add new elements</button>

相关文章：