jQuery 的 delegate() 不会为 AJAX 加载的内容绑定事件答案

【问题标题】：jQuery's delegate() does not bind events for AJAX loaded contentjQuery 的 delegate() 不会为 AJAX 加载的内容绑定事件
【发布时间】：2011-09-28 06:03:59
【问题描述】：

我想使用 jQuery 的 .delegate() 方法，因为我读过它的性能比 .live() 好得多。

但是，当我使用 .delegate() 时，它不会将事件绑定到 ajax 加载的内容。

谁能帮我让 .delegate() 工作？还是我坚持使用较慢的 .live() 加载 ajax 内容？

   var randomObject = {

     'config' : {
       'form' : '#someform',
       'select' : '#someselect',
       'container' : '#pagecontainer'
     },


     'init' : function() {  

        randomObject.formEffects();
        randomObject.ajaxFormSubmit();    
    },


     'formEffects' : function() {

        ////////////// DELEGATE WON'T WORK on AJAX loaded content!
        //$('randomObject.config.form).delegate('select', 'change', function() {
        $(randomObject.config.select).live('change', function() {
           $(this).closest('form').trigger('submit');
        });
     },


     'ajaxFormSubmit' : function($form) { 

        $(randomObject.config.container).load($form.attr('action')+' '+randomObject.config.container, $form.data('form_values'), function(response, status, xhr){
           alert('updated!');
        });
     }, 

  };

【问题讨论】：

form、select和container是什么关系？您的 HTML 看起来如何？如果form 因为更新过程而被替换，那么绑定一个事件处理程序当然是行不通的。
在您注释掉的代码中，您有一个奇怪的单引号。 $('randomObject.config.form) 也许这起了作用？
单引号是我写问题时的拼写错误，而不是在我运行的代码中。 HTML 是
。正如 TommyB 建议的那样，修复方法是将委托绑定到外部 div（以前我一直将它绑定到 #ajax-replaced-content，因此它只能在进行 ajax 调用并替换 div 之前工作）。

标签： ajax jquery delegation

【解决方案1】：

尝试：

$(randomObject.config.container).delegate('select', 'change', function() {

正如 patrick dw 所说，如果您要定位的唯一 select 元素是 #someselect，那么您可以这样做：

$(randomObject.config.container).delegate(randomObject.config.select, 'change', function() {

【讨论】：

+1 但也许：$(randomObject.config.container).delegate(randomObject.config.select, 'change', function() { 只针对那个选择。
randomObject.config.select 是一个选择器字符串'#someselect'。如果匹配该选择器的元素直到稍后才出现在页面上，那么一旦它最终被添加，放置在容器上的.delegate() 将开始调用其change 处理程序，因为该元素会发出事件。跨度>
嗯也许...我将编辑问题以标记它。我以为 OP 正在添加多个选择
是的，这个问题有一些不清楚的地方。我想我已经假设基于传递给.live() 的选择器。但你是对的，他似乎切换到 .delegate() 行中被注释掉的不同选择器。

【解决方案2】：

由于我没有权限，因此无法发表评论。但是使用委托，您需要将事件绑定在通过 AJAX 刷新的内容之上。因此，如果您只是重新加载页面的一部分，请不要在属于该页面的内容上设置委托

<script>
 $('#parent').delegate("a", "click", function(){
   // AJAX CODE replaces the contents of #parent but not parent itself
});
</script>
<div id="parent">
      <div id="ajax">
          <a href="#">example</a>
          <p>Some content</p>
      </div>
</div>

我认为在上述情况下，这应该可以工作，因为委托绑定在 #parent 上并且 #parent 没有被更新。显然这都是伪代码，但是您是否正在重新加载您委托的项目？如果是这样，我认为您需要重新绑定事件。我很确定“实时”事件会绑定到文档，然后它只是比较目标以确保它与选择器匹配。委托从您指定的选择器开始，因此事件不需要冒泡。（据我了解）

【讨论】：

你是对的，我将事件绑定到内容中的选择器，以替换为 ajax 调用。因此，解决方法是将委托绑定到 ajax 重新加载内容之外的 div，瞧，它起作用了！....故事的寓意：1. 如果您想绑定到重新加载内容中的选择器，请使用 .live，2 . 在要替换的内容之外的选择器上使用 .delegate。非常感谢您的帮助！

【解决方案3】：

考虑这篇文章，真的很有帮助并回答了您的问题。

The Difference Between jQuery’s .bind(), .live(), and .delegate()

短篇小说，delegate()需要一个容器来处理，并接受live()之类的参数。

【讨论】：

【解决方案4】：

最近的解决方案是使用“on”事件，该事件也会触发 ajax-added-elements：

$("#mySelector").on("change submit", "form", function (e) {
      //do something
}

在这个例子中，当表单更改或提交事件被触发时，我想这样做。

【讨论】：