Question

我想使用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!');
        });
     }, 

  };

Answer 1

由于我没有获得许可，因此无法发表评论。但是使用delegate，您需要将事件绑定到通过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没有被更新。显然这都是伪代码，但是你重新加载你委托的项目了吗？如果是这样，我认为你需要重新调整事件。我很确定'live'事件被绑定到文档，然后它只是比较目标以确保它与选择器匹配。委托从您指定的选择器开始，因此事件不需要冒泡到目前为止。（据我所知）

Answer 2

考虑一下这篇文章，非常有帮助并回答你的问题。

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

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

Answer 3

更新的解决方案是使用“on”事件，该事件也会激活ajax-added-elements：

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

在这个例子中，我希望在表格更改或提交事件被触发时这样。

Answer 4

尝试：

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

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

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

jQuery的delegate（）不绑定AJAX加载内容的事件

4 个答案: