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

Posted 2023-02-22

【中文标题】如何在 Ajax 加载的内容上绑定事件？

【英文标题】：How to bind Events on Ajax loaded Content?

【发布时间】：2013-05-11 23:34:54

【问题描述】：

我有一个链接，myLink，它应该将 AJAX 加载的内容插入到我的 html 页面的 div（附加容器）中。问题是我与 jQuery 绑定的click 事件没有在插入到 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>

【问题讨论】：

注意：以下内容不起作用。您缺少类选择器的 .。

这是一个错字！它仍然无法正常工作。

见 jquery .load() 方法。 $('#target').load('source.html');

load() 有什么不同吗？

【参考方案1】：

作为一个 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

【参考方案2】：

这是我的首选方法：

// 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 调用完成后立即放置此代码。

【参考方案3】：

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

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

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

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

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

【参考方案4】：

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


);

【参考方案5】：

对于那些仍在寻找解决方案的人来说，最好的方法是在文档本身上绑定事件，而不是与“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
        
    );
);

);

【参考方案6】：

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

示例 -

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

【参考方案7】：

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

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

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

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

https://learn.jquery.com/events/event-delegation/ http://jqfundamentals.com/chapter/events

【讨论】：

我更喜欢这个答案而不是@lifetimes 的答案，因为它告诉我将处理程序设置为加载时存在的某个父元素，不一定一直到 document。这使得 on 的第二个参数中的选择器不太容易出现意外匹配。

如果 ajax 加载的 html 类也是父元素，那么它不工作

【参考方案8】：

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

【参考方案9】：

对于 ASP.NET，试试这个：

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

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

请查看完整的讨论here。

【讨论】：

这个“Sys.Application”从何而来？ --'

它似乎属于 ASP.NET：msdn.microsoft.com/en-us/library/vstudio/…

【参考方案10】：

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

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

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

【讨论】：

这是我写的。

@confile 真的吗？我已将您的问题读了两遍，无论是书面形式还是代码形式都没有看到？

@confile 我的回答确实有效！！这是一个例子 - jsfiddle.net/EFjzG

嗨，这个答案很好用。事件附加在整个文档上，因此基本上每次点击页面都会触发事件，但是随后，选择器“.mylink”被应用于过滤我们需要的点击事件。精湛的技术。

答案是正确的（只是想强制执行）。 $(".mylink").on("click", function(event) alert("新链接点击了！"););与 $(document).on("click", '.mylink', function(event) alert("new link clicked!"); );

不一样

【参考方案11】：

使用 jQuery.live() 代替。文档here

例如

$("mylink").live("click", function(event)  alert("new link clicked!"););

【讨论】：

.live() 在最新的 jquery 版本中已被弃用和删除。