jQuery не обрабатывает созданный элемент.

#jquery #div #html

Добрый день. Создаю Div с помощью jQuery:
$("#main").append("
Тест
");

Однако если вызвать функцию
 $('#one a').click(function() { 
    alert('1');
 });

Алерт не срабатывает. Подскажите пожалуйста в чем ошибка?    

Ответы

Ответ 1

Дело в том, что .click() навешывает обработчики только на существующие элементы DOM,
чтобы навесить обработчик на тот элемент, которой возможно будет создан динамически,
используйте .on() или ему подобные, делегирующие методы: .bind(), .delegate(), .live().
$("#one a").on("click", function(event){
    alert('1');
});

или
$(document).on("click", "#one a", function(event){
    alert('1');
});


Ответ 2

Пример из вопроса не работает из-за синтаксической ошибки. Там неправильная
комбинация кавычек. Их нужно либо экранировать с помощью обратной косой черты
(\"), либо заменить на одинарные без ущерба для HTML.



$("#main").append("
Тест
");
$('#one a').click(function() { 
    console.log('1');
});






В остальном код работоспособен. Вызов метода .click(c) абсолютно идентичен
вызову .on("click", c), и замена ни на что не влияет.

Если поменять последовательность создания тега со ссылкой и навешивание
обработчика щелчка, код, естественно, работать не будет т.к. $("#one a")
вернёт пустую коллекцию, и метод будет не к чему применять. Если логика работы
требует вначале создавать обработчик, а затем ссылки, можно его навешивать на
корневой элемент и перехватывать всплывающие события от ссылок,
отфильтровыывая их. Для такой фильтрации надо вызывать метод
.on("click", "#one a", c). Тогда каждое нажатие в пределах веб-страницы
будет обрабатываться, и если оно было по ссылке с родителем чей id="one",
вызовется c.

Подробности про обработку событий — в учебнике JavaScript, список методов
для обработки событий можно найти в документации jQuery.