如何根据条件更改id属性？

Question

In the below snippet I'm changing the id attribute value of the UPDATE button. But while its id value is changed then according its change id why jQuery is not working well according update button id attribute.

 $('#save').click(function(){ console.log(this.value); if(this.value == 1){ $("#update").attr('id','update1'); } else{ $("#update").attr('id','update2'); } console.log($('.update').attr("id")); }); $('#update').click(function(){ console.log($('.update').attr("id")); console.log("hello update"); }); $('#update1').click(function(){ console.log($('.update').attr("id")); console.log("hello update1"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="textfield" type="text" placeholder="Enter"> <button id ="save" value= "1">save</button> <button id ="update" class="update">Update</button> 

How will I do it that When save button is clicked then id value is changed according its condition. And according the value of the id attribute of the update button how will Jquery works means if id="update1" then in console.log it will print "hello update1" else "update". Any help will be appreciated. Thank you.

Answer 1

It seems the since the event is already attached to the DOM element, updating id and clicking on it is making no difference.

You can try by delegating the event using on

 $('#save').click(function() { console.log(this.value); if (this.value == 1) { $("#update").attr('id', 'update1'); } else { $("#update").attr('id', 'update2'); } console.log($('.update').attr("id")); }); $('#update').click(function() { console.log($('.update').attr("id")); console.log("hello update"); }); $('body').on('click', '#update1', function() { // changed here console.log($('.update').attr("id")); console.log("hello update1"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="textfield" type="text" placeholder="Enter"> <button id="save" value="1">save</button> <button id="update" class="update">Update</button> 

Answer 2

@vikas kumar, try with below solution,

 $(document).ready(function(){ $('#save').click(function(){ if(this.value == 1){ $("#update").attr('id','update1'); } else{ $("#update").attr('id','update2'); } }); $('.update').click(function(){ console.log($('.update').attr("id")); switch($('.update').attr("id")) { case "update": console.log("hello update"); break; case "update1": console.log("hello update1"); break; case "update2": console.log("hello update2"); break; } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="textfield" type="text" placeholder="Enter"> <button id ="save" value= "1">save</button> <button id ="update" class="update">Update</button>