如何在Ajax加载的内容上绑定事件？

Question

我有一个链接,myLink应该将加载AJAX的内容插入到div我的HTML页面的(attachedContainer)中.问题是click我绑定到jQuery 的事件没有在插入到additionalContainer中的新加载的内容上执行.该click事件绑定在未加载我的AJAX函数的DOM元素上.

我需要改变什么,以便事件受到约束？

我的HTML:

<a class="LoadFromAjax" href="someurl">Load Ajax</a>
<div class="appendedContainer"></div>

我的JavaScript:

$(".LoadFromAjax").on("click", function(event) {
    event.preventDefault();
    var url = $(this).attr("href"),
        appendedContainer = $(".appendedContainer");

    $.ajax({
    url: url,
    type : 'get',
    complete : function( qXHR, textStatus ) {           
        if (textStatus === 'success') {
            var data = qXHR.responseText
            appendedContainer.hide();
            appendedContainer.append(data);
            appendedContainer.fadeIn();
        }
      }
    });

});

$(".mylink").on("click", function(event) { alert("new link clicked!");});

要加载的内容:

<div>some content</div>
<a class="mylink" href="otherurl">Link</a>

Answer 1

对动态创建的元素使用事件委托:

$(document).on("click", '.mylink', function(event) { 
    alert("new link clicked!");
});

这确实有用,这里是一个例子,我用类附加一个锚.mylink而不是data- http://jsfiddle.net/EFjzG/

Answer 2

如果在调用.on()之后附加内容,则需要在已加载内容的父元素上创建委托事件.这是因为在调用.on()时(即通常在页面加载时)绑定事件处理程序.如果在调用.on()时元素不存在,则事件不会绑定到它!

因为事件通过DOM传播,我们可以通过.parent-element在页面加载时在父元素(在下面的示例中)创建委托事件来解决这个问题.这是如何做:

$('.parent-element').on('click', '.mylink', function(){
  alert ("new link clicked!");
})

关于这个主题的更多阅读:

• https://learn.jquery.com/events/event-delegation/
• http://jqfundamentals.com/chapter/events

Answer 3

如果您的问题是"如何在ajax加载的内容上绑定事件",您可以这样做:

$("img.lazy").lazyload({
    effect : "fadeIn",
    event: "scrollstop",
    skip_invisible : true
}).removeClass('lazy');

// lazy load to DOMNodeInserted event
$(document).bind('DOMNodeInserted', function(e) {
    $("img.lazy").lazyload({
        effect : "fadeIn",
        event: "scrollstop",
        skip_invisible : true
    }).removeClass('lazy');
});

所以你不需要将配置放在每个ajax代码上