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

IT技术 javascript jquery html ajax jquery-events
2021-01-18 12:53:25

我有一个链接，myLink它应该将 AJAX 加载的内容插入到div我的 HTML 页面的(appendedContainer) 中。问题是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>
6个回答

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

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

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

这是我写的，我做的。
2021-03-22 12:53:25
嗨，这个答案工作得很好。事件附加在整个文档上，因此基本上页面上的每次点击都是触发事件，但是，选择器“.mylink”用于过滤我们需要的点击事件。技术精湛。
2021-03-30 12:53:25
答案是正确的（只是想强制执行）。$(".mylink").on("click", function(event) { alert("new link clicked!");}); 不同于 $(document).on("click", '.mylink', function(event) { alert("new link clicked!"); });
2021-03-30 12:53:25
@confile 真的吗？我已经阅读了两次您的问题，但没有在书面或代码中看到它？
2021-04-05 12:53:25
@confile 我的回答确实有效！！这是一个例子 - jsfiddle.net/EFjzG
2021-04-06 12:53:25

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

由于事件通过 DOM 向上传播，我们可以通过.parent-element在页面加载时我们知道存在的父元素（在下面的示例中）上创建一个委托事件来解决这个问题。就是这样：

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

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

我更喜欢@lifetimes 的这个答案，因为它告诉我将处理程序设置为加载时存在的某个父元素，不一定一直到document。这使得第二个参数中的选择器on不太容易出现意外匹配。
2021-04-09 12:53:25
如果 ajax 加载的 html 类也是父元素，则它不起作用
2021-04-09 12:53:25

如果您的问题是“如何在 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 代码中

从 jQuery 1.7 开始，该.live()方法已弃用。使用.on()附加的事件处理程序。

例子 - 

$( document ).on( events, selector, data, handler );

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

$(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
        }
    });
});

});

其它你可能感兴趣的问题
上一篇如何不通过引用将 JavaScript 对象复制到新变量？ 下一篇如何在 ReactJS 中从“外部”访问组件方法？