动态侦听通过AJAX

Question

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

node['recipes']

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

$(document).ready()

默认情况下没有在页面中加载，因为我使用了$(".element")

但无济于事，但它什么也没做。我现在该怎么办？

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

Answer 1

动态侦听通过AJAX

添加的特定元素只要收到成功的AJAX响应，

ajaxSuccess^Docs就会触发 让我们使用，看看是否有任何特定的选择器添加到DOM

<强> jsBin example

想象一下这个简单的HTML：

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

我们希望在#receiver点击上加载内容到button：

$("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 example

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>

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

2 个答案:

动态侦听通过AJAX