如何绑定了Ajax加载的内容活动？ [英] How to bind Events on Ajax loaded Content?

问题描述

我应该插入AJAX加载的内容在我的HTML页面的一个div（appendedContainer）的链接。我的问题是，点击事件中，我已经绑定了jQuery是没有在其上插入appendedContainer新加载的内容执行。 点击事件势必在未满载我的AJAX功能的DOM元素。 我有什么改变，这样的事件将被绑定？

我的HTML：

 ＆LT;一类=LoadFromAjax的href =someurl＆GT;负载阿贾克斯＆LT; / A＆GT;

＆LT; D​​IV CLASS =appendedContainer＆GT;＆LT; / DIV＆GT;
 

我的javascript：

  $（。LoadFromAjax）。在（点击，函数（）{
    。事件preventDefault（）;
    VAR URL = $（本）.attr（HREF），
        appendedContainer = $（。appendedContainer）;

    $阿贾克斯（{
    网址：网址，
    输入：'得到'，
    完成：功能（qXHR，textStatus）{
        //附加误差的情况下

        如果（textStatus ==='成功'）{
            VAR数据= qXHR.responseText
            appendedContainer.hide（）;
            appendedContainer.append（数据）;
            appendedContainer.fadeIn（）;
        }
      }
    }）;

}）;

$（myLink的）上（点击，函数（事件）{警报（新的链接点击！）;}）;
 

的内容被装载

 ＆LT; D​​IV＆GT;有的含量小于/ DIV＆GT;
＆其中;一类=myLink的的href =otherurl＆GT;连结＆所述; / a取代;
 

解决方案

使用事件委派动态创建的元素：

  $（文件）。在（点击，.mylink'，函数（事件）{
    警报（新的链接点击！）;
}）;
 

这不实际工作，这里就是我追加的锚之类的 .mylink ，而不是数据为例 - http://jsfiddle.net/EFjzG/

I have a link that should insert ajax loaded content into a div (appendedContainer) of my html page. My 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.preventDefault();
    var url = $(this).attr("href"),
        appendedContainer = $(".appendedContainer");

    $.ajax({
    url: url,
    type : 'get',
    complete : function( qXHR, textStatus ) {
        // attach error case

        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屋！