jQuery'click'自动触发'live'

Question

这是一段简单的代码:

HTML:

<div id="close">Click me</div>

JS代码:

$("#close").click(function(){
    alert("1");
    $(this).attr('id','expand');
});



$("#expand").live('click', function(){
    alert("2");
    $(this).attr('id','close');            
});

问题:当我点击"关闭"时,它也会自动调用live().在jsfiddle中看到这个:http://jsfiddle.net/uFJkg/

是因为我将同一元素的id从"close"更改为"expand"？我该如何解决这个问题？

我试过了:

 $("#expand").die().live('click', function()

但它不起作用.我尝试了event.stopPropagation(),但这也没有帮助.我尝试使用id为"expand"的单独div并将其隐藏在document.ready上但由于某种原因它也不起作用.

然后我尝试了,因为我读到jQuery 1.7+中不推荐使用live():

$("#expand").on('click', function(){

这也不行.

有什么想法吗？我认为一双新鲜的眼睛能够发现我所缺少的东西.

谢谢.

Answer 1

在这种情况下,您需要两个委托事件(aka live)处理程序.因为,你在两个ids 之间切换,这种切换使得两者都id成为DOM的动态.

$("body").on("click", "#close", function(){
    alert("1");
    $(this).attr('id','expand');
});

$("body").on("click", "#expand", function(){
    alert("2");
    $(this).attr('id','close');            
});

DEMO

注意

由于live()被弃用,所以不是live()使用.on()了委托事件处理.