通過使用jQuery的數據切換查找元素

Question

我需要使用jQuery動態構建表單。此表單有一個複選框項目列表。我建立這個名單是這樣的：

function initializeForm() 
{ 
    var html = ''; 

    var items = GetItems(); 
    for (var i=0; i<items.length; i++) { 
    html += '<div><input id="item' + item.ItemId + '" data-toggle="itemCheckBox" name="SelectedItemIds" value="' + item.ItemId + '" type="checkbox" />&nbsp;' + item.Name + '</div>'; 
    } 
    $('#itemList').html(html); 
} 

我想給用戶使用以下點擊複選框中的一個反應：

$('input[data-toggle="itemCheckBox"]').change(function() { 
    alert('here'); 
    if($(this).is(":checked")) { 
    alert('check'); 
    } else { 
    alert('uncheck'); 
    } 
}); 

不幸的是，此事件處理程序永遠不會觸發。我不懂爲什麼。我的選擇器對我來說是正確的。有人可以告訴我我做錯了什麼嗎？

Answer 1

問題是事件處理程序沒有綁定，因爲元素在頁面加載後被添加到DOM。這應該這樣做：

$('body').on('change', 'input[data-toggle="itemCheckBox"]', function() { 
    alert('here'); 
    if($(this).is(":checked")) { 
     alert('check'); 
    } else { 
     alert('uncheck'); 
    } 
}); 

這是將事件綁定到選擇器。 http://api.jquery.com/on/