Невозможно изменить цвет тега

Question

Мой демо-код: http://jsfiddle.net/4w3Hy/3/

Мой первый код добавляет HTML к DIV с идентификатором: Содержание:

$(".text").click(function() { 
$("#Content").html($(this).next(".text1").html()); 
}); 

На ид: Материалы, с новым HTML , я пытаюсь запустить еще одну функцию jquery:

$(".click").click(function() { 
$('.click').css('color',''); 
$(this).css("color", "red"); 
}); 

Но как-то это не будет работать !! Что я сделал неправильно? для просмотра html http://jsfiddle.net/4w3Hy/3/

Answer 1

Используйте on для присоединения событий к элементам, динамически добавленным к DOM. В исходном коде элемент .click отсутствует в DOM в то время, когда обработчик события click привязан ко всем элементам класса .click, поэтому событие никогда не связано с новым элементом.

Использование on() позволяет нам присоединить обработчик событий к родительскому объекту, например document, уже доступному на DOM. .click элементы добавляются к document, и при нажатии на него срабатывает событие click, которое распространяется на document. Как только document получит событие click, он определит, был ли событие возбуждено элементом класса .click, если он выполнит наше присоединенное событие. Если вы знакомы с устаревшим методом live(), вы в значительной степени понимаете концепцию.

Как правило, было бы лучше прикрепить к статическому родителю ближе к элементу .click, однако, поскольку у меня не было всей вашей разметки HTML, я использовал document.

$(".text").click(function() { 
    $("#Content").html($(this).next(".text1").html()); }); 

$(document).on("click", ".click", function() { 
    $('.click').css('color',''); 
    $(this).css("color", "red"); }); 

JS Fiddle:http://jsfiddle.net/4w3Hy/5/

Answer 2

Попробуйте это:

DEMO

$(".text").click(function() { 
    $("#Content").html($(this).next(".text1").html()); 
    $(".click").click(function() { 

    $(this).css({color:"red" }); 
}); 
});