jquery - 无法更改 a-tag 的颜色

Question

我的演示代码：http: //jsfiddle.net/4w3Hy/3/

我的第一个代码将 html 添加到具有 id:Content 的 div 中：

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

在 id:Content 上，使用新的 html，我尝试运行另一个 jquery 函数：

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

但不知何故，这行不通！我做错了什么？看 html http://jsfiddle.net/4w3Hy/3/

Answer 1

使用on将事件附加到动态附加到 DOM 的元素。在原始代码中，当事件处理程序附加到具有 class 的所有元素.click时，DOM 上不存在该元素，因此该事件永远不会绑定到新元素。click.click

Usingon()允许我们将事件处理程序附加到父级，例如documentDOM 上已经可用的父级。 .click然后将元素附加到document并且单击时会触发传播到document. 一旦document接收到click事件，它将确定该事件是否由具有 class 的元素触发.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 小提琴：http: //jsfiddle.net/4w3Hy/5/

Answer 2

尝试这个：

演示

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

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