javascript - jQuery 更改 ID 不会运行函数

Question

我正在尝试制作一个蓝色的 div，点击它时它会变成红色，红色的 div 会变回蓝色(这样我就可以在点击后添加更多事件，所以 .css 不是一个真正的选择)

在蓝色的 div 上单击时，它会变成红色。但是当我点击红色 div 它没有响应，即使我添加了一个简单的 alert()

有人知道我做错了什么吗？

这是我当前的代码和一个 JSFiddle

代码:

$("#Blue").click(function(){
    $("#Blue").attr("id","Red");
});

$("#Red").click(function(){
    $("Red").attr("id","Blue");
});

如果有人能告诉我到底我做错了什么，那就太好了，提前谢谢

Answer 1

您需要使用事件委托(delegate)——您的click 处理程序在代码首次运行时绑定(bind)到匹配的元素，而且仅在那时。由于当时没有 #Red 元素，因此第二个点击处理程序未绑定(bind)任何内容。

$(document).on('click',"#Blue", function(){
    $("#Blue").attr("id","Red");
});

$(document).on('click',"#Red", function(){
    $("#Red").attr("id","Blue");
});

http://jsfiddle.net/mblase75/HDFyn/

http://api.jquery.com/on

---

也就是说，执行此操作的“正确”方法是添加和删除类，而不是更改 ID:

$('#btn').on('click', function(){
    $(this).toggleClass("red blue");
});

http://jsfiddle.net/mblase75/mKMW6/