首页 文章

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

提问于
浏览 次
72

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

我需要改变什么，以便事件受到约束？

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>
javascript jquery html ajax jquery-events

8 回答

  • 0

    对于ASP.NET试试这个：

    <script type="text/javascript">
    Sys.Application.add_load(function() { ... });
</script>

    这似乎适用于页面加载和更新面板加载

    请找到完整的讨论here .

    回复于
  • 0

    对于仍在寻找解决方案的人来说，最好的方法是将事件绑定到文档本身而不是与“准备好”事件绑定例如：

    $(function ajaxform_reload() {
$(document).on("submit", ".ajax_forms", function (e) {
    e.preventDefault();
    var url = $(this).attr('action');
    $.ajax({
        type: 'post',
        url: url,
        data: $(this).serialize(),
        success: function (data) {
            // DO WHAT YOU WANT WITH THE RESPONSE
        }
    });
});

    }）;

    回复于
  • 153

    例如，如果您的ajax响应包含html表单输入，那么这将是很好的：

    $(document).on("change", 'input[type=radio][name=fieldLoadedFromAjax]', function(event) { 
if (this.value == 'Yes') {
  // do something here
} else if (this.value == 'No') {
  // do something else here.
} else {
   console.log('The new input field from an ajax response has this value: '+ this.value);
}

});
    回复于
  • 0

    如果您的问题是“如何在ajax加载的内容上绑定事件”，您可以这样做：

    $("img.lazy").lazyload({
    effect : "fadeIn",
    event: "scrollstop",
    skip_invisible : true
}).removeClass('lazy');

// lazy load to DOMNodeInserted event
$(document).bind('DOMNodeInserted', function(e) {
    $("img.lazy").lazyload({
        effect : "fadeIn",
        event: "scrollstop",
        skip_invisible : true
    }).removeClass('lazy');
});

    所以你不需要将配置放在每个ajax代码上

    回复于
  • 5

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

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

    这确实有用，这里是一个例子，我用类 .mylink 而不是 data 附加一个锚 - http://jsfiddle.net/EFjzG/

    回复于
  • 0

    如果在调用.on（）之后附加了内容，则需要在已加载内容的父元素上创建委托事件 . 这是因为在调用.on（）时（即通常在页面加载时）绑定事件处理程序 . 如果在调用.on（）时元素不存在，则事件不会绑定到它！

    因为事件通过DOM传播，我们可以通过在页面加载时在父元素（下面的示例中为 .parent-element ）上创建委托事件来解决这个问题 . 这是如何做：

    $('.parent-element').on('click', '.mylink', function(){
  alert ("new link clicked!");
})

    关于这个主题的更多阅读：

    回复于
  • 1

    从jQuery 1.7开始，不推荐使用 .live() 方法 . 使用 .on() 附加事件处理程序 .

    示例 -

    $( document ).on( events, selector, data, handler );
    回复于
  • 14

    使用jQuery.live（）代替 . 文档here

    例如

    $("mylink").live("click", function(event) { alert("new link clicked!");});
    回复于

相关问题