Проблема с JQuery привязки

Question

Я использую JQuery привязки на кучу кнопок радио со следующим кодом:

jQuery().ready(function() { 
    jQuery("input[name='rank_number']:radio").bind('change', function(){ 

     submitSelectedRank(); 
    }); 

}); 

Этот код работает отлично на начальной загрузке страницы, но HTML для этих кнопок радио может быть перезагружен через вызов Ajax с помощью:

$.ajax({ 
     type: "POST", 
     url: "/loadMyRadioButtons", 
     data: rankings, 
     dataType: "html", 
     success: function(response) 
     { 
      $('#radioBtnDiv').html(response); 
     } 
    }); 

теперь вопрос, в любое время это Ajax вызов заменяет HTML-код, обязательные остановки работы. Как это исправить?

Answer 1

Использование событие делегации:

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

Здесь document можно заменить любым родителем ваших входов, которые существуют на странице загрузки. i.e:

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