jQuery 'click' automatically fires 'live'

Question

Here is a simple piece of code:

HTML:

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

JS Code:

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



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

Problem: When I click on "close" it automatically calls live() too. See this in jsfiddle: http://jsfiddle.net/uFJkg/

Is it because I am changing the same element's id from "close" to "expand"? How do I fix this problem?

I have tried:

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

but it didn't work. I tried event.stopPropagation() but that didn't help too. I tried having a separate div with id "expand" and hide it on document.ready but for some reason it is not working too.

Then I have tried since I read that live() has been deprecated in jQuery 1.7+:

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

and that is not working too.

Any thoughts? I think a fresh set of eyes will be able to spot what I am missing.

Thanks.

Answer 1

You need both delegate event (aka live) handler in this case. Because, you're toggling between both ids and this toggling make both ids as dynamic to DOM.

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

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

DEMO

Note

As live() is deprecated, so instead of live() use .on() for delegate event handling.