Странность порядка распространения jQuery - PullRequest
Новая
       13

Странность порядка распространения jQuery

0 голосов
/ 30 августа 2010

Я упростил HTML и Javascript.

Структура HTML 

ul -> li -> a

JavaScript 

var $ul = $('#the-list');

$ul.find('a').click(function(e){
    e.stopImmediatePropagation();
    console.debug('a');
});

$ul.unbind('click').click(function(){
    console.debug('ul');
});

Проблема

При первом нажатии на ссылку все работает нормально.Но после обновления содержимого списка с помощью $ul.html(newHtml) и повторного выполнения приведенного выше кода сначала вызывается событие в $ ul.

Первый раз:

  1. a
  2. Останавливается там

Второй раз:

  1. ul
  2. a

Что может вызвать такое поведение?Прошу прощения за обратную структуру этого вопроса

1 Ответ

1 голос
/ 30 августа 2010

Если вы стираете содержимое вашего ul, вы не должны привязывать слушателей событий к содержимому;вместо этого привязайте прослушиватель щелчков к самому ul, и вы можете прослушивать события щелчков на ul и его дочерних элементах, все в одном прослушивателе.Это называется делегированием событий. 

$ul.click(function (e) {
    var $target = $(e.target);
    console.log($target);
});

Если вы хотите специально прослушивать события щелчка на ul и привязанных к нему элементах, вы можете использовать $.live(): 

$ul.add($ul.find('a')).live('click', function (e) {
    console.log(e.target);
});

Должен дать вам события щелчка, которые вы хотите.Я не уверен на 100%, так как .add может немного изменить ситуацию, но это основная идея.Тестирую это сейчас.

...