элемент jquery prepend

Question

У меня есть элемент списка, который содержит тег привязки.Это делает 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 () для 'change'

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

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

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

То, что нужно для регистрации клика на моем новом элементе "на лету".

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

Answer 1

Требуется делегат jQuery ().

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

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

Answer 2

На самом деле у вас путаница с селекторами.После того, как вы выберете правильную вещь через 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) {
    ...
});

Answer 3

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

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

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

});

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

Вместо <a href="#" id="delete"> вы можете выполнить <a href="#" class="delete"> иизмените ваш селектор на ul#foo li p a.delete.