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

我有一个链接，

myLink

，可以将AJAX加载的内容插入HTML页面的

div

（appendedContainer）。问题是，我与jQuery绑定的

click

事件没有在插入到appendedContainer的新加载内容上执行。

click

事件绑定在未使用my AJAX函数加载的DOM元素上

我必须改变什么，这样活动才会受到约束

我的HTML:

我的JavaScript:

$（.LoadFromAjax”）。在（“单击”上，函数（事件）{
event.preventDefault（）；
var url=$（this.attr（“href”），
appendedContainer=$（“.appendedContainer”）；
$.ajax({
url:url，
键入：“get”，
完成：函数（qXHR，textStatus）{
如果（textStatus==“成功”）{
var数据=qXHR.responseText
appendedContainer.hide（）；
appendedContainer.append（数据）；
appendedContainer.fadeIn（）；
}
}
});
});
$（“.mylink”）。在（“单击”上，函数（事件）{alert（“单击新链接！”；}）；

要加载的内容：

一些内容

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

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

这确实有效，下面是一个示例，我使用类

.mylink

附加了一个锚点，而不是

数据-
使用jQuery.live（）代替。文件

e、 g

对于ASP.NET，请尝试以下操作：

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


Sys.Application.add_load（函数（）{…}）；

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

请找到完整的讨论
 如果您的问题是“如何在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代码中
如果在调用.on（）之后追加内容，则需要在加载内容的父元素上创建委派事件。这是因为调用.on（）时（即通常在页面加载时）会绑定事件处理程序。如果调用.on（）时元素不存在，则事件将不会绑定到它

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

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

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




从jQuery 1.7开始，
.live（）
方法已被弃用。使用
.on（）
附加事件处理程序

示例-

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

对于那些仍在寻找解决方案的人，最好的方法是将事件绑定到文档本身，而不是绑定到事件“on ready”
例如：

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

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

});

Ajax加载内容上事件绑定的重要步骤

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

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

02。在文档级别添加事件侦听器

$(document).on("EVENT", '.SELECTOR', function(event) { 
    console.log("Selector event occurred");
});

以下是我的首选方法：

我会在AJAX调用完成后立即编写这段代码。
我会添加一点，作为一名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);
});

如果您的事件委派在document ready中完成，则会出现类似的错误：

cant assign guid on th not an boject

这就是我写的我做的。@confile真的吗？我已经读了两遍你的问题，但无论是书面还是代码都看不到？@confile我的答案确实有效！！这里有一个例子-嗨，这个答案很好用。事件附加在整个文档上，所以基本上页面上的每次单击都会触发事件，但随后，选择器“.mylink”将应用于筛选我们需要的单击事件。优秀的技术。答案是正确的（只是想强制执行）$（“.mylink”）。在（“单击”上，函数（事件）{alert（“单击新链接！”；}）；与$（document）不同。在（“click”、“.mylink”上，函数（事件）{alert（“new link clicked！”；}）
.live（）
在最新的jquery版本中已被弃用并删除。注意：以下操作不起作用。您缺少类选择器的
。这是一个输入错误！它仍然不工作。请参阅jquery方法$（'#target'）.load（'source.html'）；load（）是否做了一些不同的事情？这个“Sys.Application”从何而来？--'它似乎属于ASP.NET：与@lifetimes的答案相比，我更喜欢这个答案，因为它告诉我将处理程序设置为加载时存在的某个父元素，而不一定一直到文档。这使得

上的

的第二个参数中的选择器不太容易出现意外匹配
$(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