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

我有一个链接,该链接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上绑定事件?

胡子哥哥
浏览 531回答 3
3回答

SMILET

如果您的问题是“如何在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代码中
打开App,查看更多内容
随时随地看视频慕课网APP