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

Question

我有一组加载的元素，因此动态注入到DOM中。 我有一个脚本，要求元素完全加载才能正常工作。 假设以下代码：

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

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

$(".element").load()

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

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

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

Answer 1

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

只要收到成功的AJAX响应， ajaxSuccess ^Docs就会触发。
让我们使用它 ，看看是否有任何特定的选择器添加到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) );
  });
};

当所需的选择器（元素/ s）添加到我们的DOM 并检索它时，将会在任何时刻触发以下调用：

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

jsBin的例子

Answer 2

即使它已被弃用，请参阅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>