如何在 Ajax 加载的内容上绑定事件? [英] How to bind Events on Ajax loaded Content?

问题描述

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

我必须更改什么才能绑定事件?

我的 HTML:

我的 JavaScript:

$(".LoadFromAjax").on("click", function(event) {event.preventDefault();var url = $(this).attr("href"),appendedContainer = $(".appendedContainer");$.ajax({网址:网址，类型:'获取'，完成:功能(qXHR，textStatus){如果(文本状态 === '成功'){var 数据 = qXHR.responseTextappendContainer.hide();appendContainer.append(data);appendContainer.fadeIn();}}});});$(".mylink").on("click", function(event) { alert("new link clicked!");});

要加载的内容:

一些内容
<a class="mylink" href="otherurl">链接</a>

解决方案

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

$(document).on("click", '.mylink', function(event) {alert("点击了新链接！");});

这确实有效，这是一个示例，我在该示例中附加了一个带有 .mylink 类的锚点，而不是 data - http://jsfiddle.net/EFjzG/

I have a link, myLink, that should insert AJAX-loaded content into a div (appendedContainer) of my HTML page. The problem is that the click event I have bound with jQuery is not being executed on the newly loaded content which is inserted into the appendedContainer. The click event is bound on DOM elements that are not loaded with my AJAX function.

What do I have to change, such that the event will be bound?

My HTML:

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

My 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!");});

The content to be loaded:

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

解决方案

Use event delegation for dynamically created elements:

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

This does actually work, here's an example where I appended an anchor with the class .mylink instead of data - http://jsfiddle.net/EFjzG/

这篇关于如何在 Ajax 加载的内容上绑定事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！