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

Question

我有一个链接，该链接myLink应该将AJAX加载的内容插入divHTML页面的（appendContainer）。问题是click我绑定到jQuery 的事件未在插入到appendedContainer中的新加载的内容上执行。该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>

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

Answer 1

如果您的问题是“如何在ajax加载的内容上绑定事件”，您可以这样做：$("img.lazy").lazyload({&nbsp; &nbsp; effect : "fadeIn",&nbsp; &nbsp; event: "scrollstop",&nbsp; &nbsp; skip_invisible : true}).removeClass('lazy');// lazy load to DOMNodeInserted event$(document).bind('DOMNodeInserted', function(e) {&nbsp; &nbsp; $("img.lazy").lazyload({&nbsp; &nbsp; &nbsp; &nbsp; effect : "fadeIn",&nbsp; &nbsp; &nbsp; &nbsp; event: "scrollstop",&nbsp; &nbsp; &nbsp; &nbsp; skip_invisible : true&nbsp; &nbsp; }).removeClass('lazy');});因此您无需将配置放在每个ajax代码中