jQuery не работает после загрузки дополнительного контента

Question

Я совершенно новый для javascript, но я использую его на своем веб-сайте. На прошлой неделе я нашел скрипт, который загружает дополнительный контент на мою страницу через jQuery. Все было в порядке, пока я не заметил, что из-за этого мои другие сценарии перестали работать. Например, у меня есть сценарий, который связывает флажки:

<script> 
$(document).ready(
    function() { 
     $('.class_of_checkbox').click(
      function() { 
       if(this.checked == true) { 
        $(".class_of other_checkbox").attr('checked', this.checked); 
       } 
      } 
     ); 
    } 
); 
</script> 

Это встроенный код. Я прочитал, что это может быть вызвано функцией ready(), которая срабатывает только при загрузке DOM, но я не уверен, как решить эту проблему.

Answer 1

Динамические элементы, загруженные с помощью AJAX потребностей делегированных обработчиков событий:

$(document).ready(function() { 
    $(document).on('change', '.class_of_checkbox', function() { 
     if (this.checked) 
      $(".class_of other_checkbox").prop('checked', this.checked); 
    }); 
}); 

Заменить второй document с ближайшим не динамическим родителем, используйте prop() для свойств и используйте change Событие, чтобы зафиксировать изменения в состоянии флажка.

Answer 2

Использование $ .ajaxComplete пересвязать ваши действия, когда вызов Ajax завершает

http://api.jquery.com/ajaxComplete/

$(document).ajaxComplete(function() { 
    $('.class_of_checkbox').click(
     function() { 
      if(this.checked == true) { 
       $(".class_of other_checkbox").attr('checked', this.checked); 
      } 
     } 
    ); 
});