JavaScript StopPropagation не работает с Ajax .load

Question

я использовал .stopPropagataion() чтобы остановить пузырьки в <li class="article"> При нажатии на <a> ярлык.

$(document).ready(function(){
   $(".article a").click(function(e) {
        e.stopPropagation();
   });
});

С этим HTML:

<li class="article" onlick="javascript:somefunction();">
   <div id="div_id">
      <a>Some link</a>
   </div>
</li>

Все работало нормально, но потом я использовал $('#div_id').load("div_html.html") загружать какой -то контент в диван динамически. Теперь мой .stopPropagation() не останавливает пузырьки. Почему это больше не работает?

Answer 1

Проблема в том, что когда вы обновляете содержание div, Вы уничтожаете все элементы, которые были внутри него (включая любые обработчики событий, прикрепленные к ним). Ваш код зацепит click событие на a элементы, которые находятся в div Как когда работает ваш код; новый a элементы в div не будет подключен.

В вашем случае вам лучше использовать delegate (живой пример, с load):

$(document).ready(function(){
   $(".article div").delegate("a", "click", function(e) {
        e.stopPropagation();
   });
});

Это зацепляет click на div вместо. Когда происходит щелчок, он пузырится по ссылке на div, где обработчик щелчков, созданный JQUERY, проверяет его, чтобы увидеть, на самом деле это был щелчок на любой a элемент. Если так, это останавливает щелчок.

По состоянию на jQuery 1.7 новый рекомендуемый синтаксис on вместо:

$(document).ready(function(){
   $(".article div").on("click", "a", function(e) {
        e.stopPropagation();
   });
});

Обратите внимание, что порядок аргументов отличается от delegate, но кроме этого это делает то же самое.

---

Я бы порекомендовал избегать объединения обработчиков DOM0 старого стиля (атрибуты обработчика событий) с кодом DOM2 нового стиля (ваш обработчик, прикрепленный с jQuery). Во многих браузерах эти два механизма несколько отделены и могут играть не так хорошо, как хотите.

Два других комментария по этому поводу:

onlick="javascript:somefunction();"

1. Это onclick, нет onlick (вам не хватает c)
2. Вы не используете javascript: псевдопротокол на атрибутах обработчика, только hrefс Просто удалите эту часть. (Почему это не вызывает ошибки? Потому что исключительно по совпадению, это действительный JavaScript - вы определяете этикетка Вы никогда не используете.)