Как обойти пузырь событий, используя jQuery's: .live () - PullRequest
Новая
       12

Как обойти пузырь событий, используя jQuery's: .live ()

1 голос
/ 20 марта 2010

Вот код, о котором идет речь: 

$(".navItems>ul>li").live('click', function() {
  var selectorID = $(this).attr('id');
  $(".infoList").slideUp('fast', function(){
    switchTabInfo(selectorID);
  });
  function switchTabInfo(selectorID){
    var actionID = selectorID.substring(4);
    actionID = "#" + actionID;
    $(actionID).slideDown();
  }
})

Короче говоря, у меня есть классы .infoList с именами идентификаторов, привязанными к идентификатору nav li. Идентификатором этого списка может быть, например, nav_testsHistory. Со всеми полями содержимого, скрытыми по имени класса, этот javascript создает эффект слайда вверх-вниз.

Но третий блок контента мигает, как и второй после нажатия третьего блока. Он скользит вверх и вниз в течение второго ненужного времени.

Если я добавлю следующее предупреждение: 

$(".navItems>ul>li").live('click', function(){
  var selectorID = $(this).attr('id');
  $(".infoList").slideUp('fast', function(){
  switchTabInfo(selectorID);
  alert('bubble');
});

Оповещение срабатывает 3 раза?!

Так что мое исследование заняло чтение о пузыре событий. Что я не могу найти, так это как проверить, был ли он уволен. Я не пытался установить входное значение val и выполнить tf-тест вокруг вложенного ползунка. Потому что это грубо.

Больше информации, весь приведенный выше код находится в функции, которая находится в функции init (), которая вызывается при готовности документа. Это единственный файл js, кроме jquery 1.3.2.

Что вы, ребята, думаете?

Ответы [ 2 ]

1 голос
/ 20 марта 2010

Я не думаю, что ваша проблема пузырится, но в вашем селекторе. Вы выбираете по классам, поэтому все классы будут запускать эту анимацию (все 3, поэтому вы получаете 3 оповещения).

Я думаю, что в этом случае: 

$(".infoList").slideUp('fast', function(){
  switchTabInfo(selectorID);
});

То, что вы можете хотеть, это: 

$(".infoList:visible").slideUp('fast', function(){
  switchTabInfo(selectorID);
});

В настоящее время вы выбираете все class="infoList" и сдвигаете их вверх, если вы просто хотите скрыть видимую, добавьте селектор :visible. .stop() также устранит некоторые проблемы с очередью, например: 

$(".navItems>ul>li").live('click', function() {
  var selectorID = $(this).attr('id');
  $(".infoList:visible").slideUp('fast', function(){
    $("#" + selectorID.substring(4)).stop().slideDown();
    switchTabInfo(selectorID);
  });
})
0 голосов
/ 20 марта 2010

$(".infoList") не привязан к какому-либо контексту, поэтому возможно, что в других li элементах они есть, и вы запускаете slideUp для всех.

Возможно, вы захотите изменить его на: 

$(".infoList", this).slideUp...
...