title: Img click() after img id change
body: <p>Sorry for my english.</p>
  
  <p>I have a table with the favorites column that contains an image: fav_on or fav_off and its id is fav_on or fav_off.</p>
  
  <p>When I click I change the id (if I check the DOM with firefox the id change correctly), but if I click again, the event connected to the old id runs.</p>
  
  <p>Can someone help me?</p>
  
  <p>thank you</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr id="1"&gt;
         &lt;td id="fav_ali" data-fav_ico="0"&gt;&lt;img src="img/tmp.png" id="fav_off" class="img_btn" title="add to fav"/&gt;&lt;/td&gt;
         &lt;td id="des_ali" class="cg_ott"&gt;aaaa&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="2"&gt; 
         &lt;td id="fav_ali" data-fav_ico="1"&gt;&lt;img src="img/tmp.png" id="fav_on" class="img_btn" title="del from fav"/&gt;&lt;/td&gt;
         &lt;td id="des_ali" class="cg_na"&gt;aaaaa&lt;/td&gt;
      &lt;/tr&gt;    
  &lt;/table&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$('#fav_off').on("click", function (e) {
    e.preventDefault();
    console.log("Fav Off click");
    //change DB...
    this.id = "fav_on";
  });
  
  $('#fav_on').on("click", function (e) {
    e.preventDefault();
    console.log("Fav On click");
    //change DB...
    this.id = "fav_off";
  });
  </code></pre>