使用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/