小编典典

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

ajax

我有一个链接,该链接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>
<a class="mylink" href="otherurl">Link</a>

阅读 266

收藏
2020-07-26

共1个答案

小编典典

将事件委托用于动态创建的元素:

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

这不实际工作,这里就是我附加了该类锚的例子.mylink,而不是data-
http://jsfiddle.net/EFjzG/

2020-07-26