javascript - Issue with JQuery bind -

this question has answer here:

• event binding on dynamically created elements? 19 answers

i using jquery bind on bunch of radio buttons following code:

jquery().ready(function() {     jquery("input[name='rank_number']:radio").bind('change', function(){          submitselectedrank();     });  }); 

this code working fine on initial load of page html these radio buttons can reloaded via ajax call using:

$.ajax({         type: "post",         url: "/loadmyradiobuttons",         data: rankings,         datatype: "html",         success: function(response)         {              $('#radiobtndiv').html(response);         }     }); 

now issue, anytime ajax call replaces html code, binding stops working. how fix that?

use event delegation:

$(document).on('change', "input[name='rank_number']:radio", function(){     submitselectedrank(); }); 

here, document can replaced parent of inputs exists on page load. i.e:

$('#radiobtndiv').on('change', "input[name='rank_number']:radio", function(){     submitselectedrank(); });