JQuery绑定问题

Question

我在一堆单选按钮上使用jQuery bind，代码如下：

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可以替换为页面加载时存在的任何输入父级。即：

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