JQuery- Change the id of an element and call a function on click

Question

I have an element with some id, I changed its ID and when I click on that element (with new ID now), it still calls the function with previous ID

$('#1st').click(function(){
    $('#1st').attr('id','2nd');
    alert("id changed to 2nd");
});
$('#2nd').click(function(){
    alert("clicked on second");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="javascript:;" id="1st">Click</a>

Example is here

always post the relevant code in the question. – Bhojendra Rauniyar Dec 05 '14 at 21:05 — Bhojendra Rauniyar, Dec 05 '14 at 21:05
I can't open the link... – Bhojendra Rauniyar Dec 05 '14 at 21:06 — Bhojendra Rauniyar, Dec 05 '14 at 21:06
It's easy: http://jsfiddle.net/9zx581td/ – SpYk3HH Dec 05 '14 at 21:09 — SpYk3HH, Dec 05 '14 at 21:09

score 3 · Accepted Answer · answered Dec 05 '14 at 21:04

Because you add the event before the element exists. It does not find an element. Either attach the event when you change the id or you need to use event delegation.

    $('#1st').on("click.one", function(e) {
      $('#1st').attr('id', '2nd');
      alert("id changed to 2nd");
      e.stopPropagation();
      $(this).off("click.one");
    });
    $(document).on("click", '#2nd', function() {
      alert("clicked on second");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="1st">Click</a>

That's a lot of extra qork when he could just use better delegation as proposed by fermis — SpYk3HH, Dec 05 '14 at 21:17

score 1 · Answer 2 · edited May 23 '17 at 10:25

Try doing it this way jsFiddle

    $(document).on('click', '#2nd', function(){
  alert("clicked on second");
 })
 .on('click', '#1st', function(e) {
  $('#1st').attr('id','2nd');
  alert("id changed to 2nd");
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="1st">Click</a>

Also see this post on using Jquery's .on() versus .click()

JQuery- Change the id of an element and call a function on click

2 Answers2