jQuery更改ID将无法运行功能

Question

我正在尝试制作一个蓝色div,当点击它时变成红色,红色div变回蓝色(所以我可以在点击后在点击上添加更多事件,所以.css实际上不是一个选项)

在蓝色时单击div时,它会变为红色.但是,当我点击红色div时,它没有响应,即使我添加一个简单的警报()

有谁知道我做错了什么？

这是我目前的代码和JSFiddle

码:

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

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

如果有人能告诉我究竟我做错了什么会很好,那么先谢谢你

Answer 1

您需要使用事件委托 - 您的click处理程序在首次运行代码时绑定到匹配的元素,然后才会使用.由于#Red该时间点没有元素,因此第二个单击处理程序不会绑定任何内容.

$(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/