Блог

У меня есть элемент списка, который содержит тег привязки. Это делает X по щелчку, и это нормально. Однако, когда я добавляю новый элемент списка «на лету» с помощью jquery, а затем щелкаю по тегу привязки в этом новом элементе списка, щелчок не регистрируется. Фрагменты кода ниже.

При нажатии:

 $('ul#foo li p a#delete').click(function(){ 

alert('hmm');
});
  

Добавление нового элемента после вызова ajax:

 onComplete: function(id, fileName, data){
            $('ul#foo').prepend(data.li);
        }
  

Теперь я думаю, что это связано с тем фактом, что DOM не знает о новом элементе?

Итак, после некоторого поиска в Google я понял, что все говорят использовать .live() для ‘изменения’

Итак, я попробовал .live():

 $('ul#foo').live('change', function() {
    //something
});
  

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

Какой идентификатор нужен для регистрации клика на моем новом элементе «на лету».

спасибо за чтение

На самом деле у вас возникла путаница с селекторами. Как только вы выберете нужную вещь с помощью jQuery, остальное будет проще. Хорошо, итак, ваш html должен выглядеть примерно так:

 <ul>
    <li><a class="someUniqueClassToTheseLinks" href="whatever"></a></li>
</ul>
  

чтобы при добавлении элемента li через jQuery он выглядел следующим образом:

 <ul>
    <li><a class="someUniqueClassToTheseLinks" href="whatever"></a></li>
    <li><a class="someUniqueClassToTheseLinks" href="whateverElse"></a></li>
</ul>
  

Теперь ваша регистрация на живое мероприятие — это просто:

 $('a.someUniqueClassToTheseLinks').live('click', function(event) {
    ...
});
  

Вам нужен jQuery delegate().

http://api.jquery.com/delegate/

Он работает аналогично .live , но немного проще и рекомендуется по сравнению с .live , который на самом деле используется только для обратной совместимости.

Вы используете live правильно, но я не думаю, что вам нужно 'change' событие. Вместо этого вам следует использовать 'click' . Кроме того, вместо того, чтобы использовать ul#foo селектор, вы хотели бы вернуться к своему исходному ul#foo li p a#delete селектору.

Что-то вроде:

 $('ul#foo li p a#delete').live('click', function(){ 

});
  

Как указывал Milimetric, это также будет иметь свои собственные проблемы из-за того, что ваш селектор использует #id тип селектора. Идентификаторы элементов должны быть уникальными на странице. На самом деле, вы хотели бы назначить класс css всем элементам, которые вы хотите перехватить с помощью обработчика события click, а затем соответствующим образом изменить свой селектор.

Вместо этого <a href="#" id="delete"> вы могли бы сделать <a href="#" class="delete"> и изменить свой селектор на ul#foo li p a.delete .