108

我有一个链接，myLink应该将 AJAX 加载的内容插入到div我的 HTML 页面的（附加容器）中。问题是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>
4

11 回答 11

256

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

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

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

于 2013-05-16T22:03:18.523 回答
29

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

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

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

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

于 2015-07-06T00:54:58.717 回答
6

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

于 2015-07-05T20:04:06.263 回答
2

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

例子 -

$( document ).on( events, selector, data, handler );
于 2016-01-03T12:07:02.083 回答
1

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

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

});

于 2016-08-10T12:10:01.683 回答
1

例如，如果您的 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);
}

});
于 2018-07-25T13:29:59.693 回答
0

改用 jQuery.live() 。文档在这里

例如

$("mylink").live("click", function(event) { alert("new link clicked!");});
于 2013-05-16T22:05:55.707 回答
0

对于 ASP.NET，试试这个：

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

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

请在此处找到完整的讨论。

于 2014-07-02T15:58:55.833 回答
0

在 Ajax 加载内容上进行事件绑定的重要步骤...

01 . 首先取消绑定或关闭选择器上的事件

$(".SELECTOR").off();

02 . 在文档级别添加事件监听器

$(document).on("EVENT", '.SELECTOR', function(event) { 
    console.log("Selector event occurred");
});
于 2021-02-10T06:14:10.290 回答
0

这是我的首选方法：

// bind button click to function after button is AJAX loaded
$('#my_button_id').bind('click', function() {
    my_function(this);
});

function my_function () {
    // do stuff here on click
}

我在 AJAX 调用完成后立即放置此代码。

于 2021-04-06T02:28:16.840 回答
0

作为一个 JS 新手，我会添加一点对我来说并不明显 - 通常你的事件将被连接到文档中，例如：

$(function() {
    $("#entcont_table tr td").click(function (event) {
    var pk = $(this).closest("tr").children("td").first().text();
    update_contracts_details(pk);
});
}

但是，您希望使用事件委托：

$(function() {
    // other events
}

$("#entcont_table").on("click","tr td", function (event) {
    var pk = $(this).closest("tr").children("td").first().text();
    update_contracts_details(pk);
});

如果您的事件委托已在准备好的文档中完成，您将出现类似错误：

cant assign guid on th not an boject
于 2021-05-21T13:37:06.773 回答