jQuery 'click' automatically fires 'live'
<p>Here is a simple piece of code:</p>

<p>HTML:</p>

<pre><code>&lt;div id="close"&gt;Click me&lt;/div&gt;
</code></pre>

<p>JS Code:</p>

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



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

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

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

<p>I have tried:</p>

<pre><code> $("#expand").die().live('click', function()
</code></pre>

<p>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.</p>

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

<pre><code>$("#expand").on('click', function(){
</code></pre>

<p>and that is not working too.</p>

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

<p>Thanks.</p>
