остановка javascript не работает с ajax .load - PullRequest
Новая
       7

остановка javascript не работает с ajax .load

2 голосов
/ 30 ноября 2011

Я использовал .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") для динамической загрузки некоторого содержимого в div.Теперь мой .stopPropagation() не прекращает пузыриться.Почему он больше не работает?

1 Ответ

4 голосов
/ 30 ноября 2011

Проблема в том, что при обновлении содержимого 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 s. Просто удали эту часть. (Почему это не вызывает ошибку? Потому что просто по стечению обстоятельств , это допустимый JavaScript - вы определяете метку , которую вы никогда не используете.)
...