使用 JSON 创建的 jquery 复选框单击功能不起作用

Question

我有一个jquery-ajax 函数，它创建了一个复选框列表。

success: function(msg){

    jQuery.each(msg.gal_sublocations, function(index, gal_sublocation) {
        html += '<input type="checkbox" name="data[GalStore][gal_sublocation_id][]" value = "'+gal_sublocation.GalSublocation.id+'" class="chkbx" id="sublocation_'+gal_sublocation.GalSublocation.id+'" />'+gal_sublocation.GalSublocation.name;

        $('#load_sublocations').html(html);
       alert(html);
       $('#sublocation_'+gal_sublocation.GalSublocation.id).click(function(){
            alert('Checked !');
        });

    });  

} 

alert(html) 产生最终警报

<input type="checkbox" name="data[GalStore][gal_sublocation_id][]" value = "99" class="chkbx" id="sublocation_99" />Beltola
<input type="checkbox" name="data[GalStore][gal_sublocation_id][]" value = "101" class="chkbx" id="sublocation_101" />Dispur
<input type="checkbox" name="data[GalStore][gal_sublocation_id][]" value = "102" class="chkbx" id="sublocation_102" />Paltan Bazar
<input type="checkbox" name="data[GalStore][gal_sublocation_id][]" value = "100" class="chkbx" id="sublocation_100" />Patarkuchi

但是当我点击复选框时，它没有提醒任何东西！怎么了？

Answer 1

您需要使用 jquery On() 因为您的代码在加载后追加。

这样使用；

$(".class").on('click', function(){
 // ajax operation
}}

Answer 2

在创建输入字符串时，最好在此处创建一个节点：

var html = $("<input />").attr({
    "type" : "checkbox",
    "name" : data[GalStore][gal_sublocation_id][],
    "id" : 'sublocation_' + gal_sublocation.GalSublocation.id,
    "class" : "chkbx"
})
.val(gal_sublocation.GalSublocation.id)
.click(function(){
      alert('Checked !');
}); 

$('#load_sublocations').append(html);