Делегат jQuery () не привязывает события для загруженного содержимого AJAX

Question

Я хочу использовать метод .delegate () jQuery, так как я прочитал, что он работает намного лучше, чем .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

Не могу комментировать, так как у меня нет разрешения. Но с делегатом вам нужно привязать событие над контентом, который обновляется через 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 не обновляется. Очевидно, это весь псевдокод, но перезагружаете ли вы элемент, от которого делегируете? Если так, то я думаю, что вам нужно перепривязать события Я почти уверен, что «живые» события привязываются к документу, и тогда он просто сравнивает цель, чтобы убедиться, что она соответствует селектору. Делегат начинается с выбранного вами селектора, поэтому событие не должно всплывать. (из того, что я понимаю)

Answer 2

Более свежим решением является использование события «on», которое также запускается для ajax-Added-elements:

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

В этом примере я хочу что-то, когда форма изменяется или отправляет событиебыл уволен.

Answer 3

Считайте эту статью действительно полезной и ответьте на ваш вопрос.

Разница между jQuery .bind (), .live () и .delegate ()

короткая история, delegate() нужен контейнер для работы и принимает такие параметры, как live().

Answer 4

try:

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

Как заметил patrick dw , если единственный элемент select, на который вы нацеливаетесь, - #someselect, то вы можете сделать это:

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