選中輸入複選框後的提示

Question

我想點擊鏈接後點擊append html輸入複選框，之後點擊輸入複選框獲得提醒is checked。

我想爲下面的代碼，但對我不工作：

DEMO：http://jsfiddle.net/HsveE/

HTML

<a href="#" id="ho">Click Me</a> 
<div class="hi"></div> 

jQuery的

$('#ho').on('click', function(e){ 
    e.preventDefault(); 
    $('.hi').append('<input type="checkbox" id="isAgeSelected"/>'); 
}) 
$(".hi input[type=checkbox]").on('click',function() { 
    alert('is checked') 
}) 

如何解決這個問題？

Answer 1

您需要委派因爲你的元素不會在結合時存在 - 或者元素後綁定確實存在

$(".hi").on('click',"input[type=checkbox]",function() { 
    alert('is checked') 
}) 

http://jsfiddle.net/5dYwG/

這樣做結合事件處理程序的元素/元素class = hi - 因爲它存在於dom準備好的時候，並且是您將複選框附加到的元素。然後它會監聽事件，因爲它會從您的複選框中冒出來並處理它們。

另一件事是總是把你的綁定包裝在一個document.ready函數中，所以它會一直等到你的dom被加載，然後再嘗試綁定事件處理程序。

$(function(){ 
    // your binding code here 
}) 

編輯

$(".hi").on('click',"input[type=checkbox]",function() { 
    if(this.checked){ 
    alert('is checked') 
    } 
}) 

FIDDLE

Answer 2

使用此...

$(".hi").on('click',"input[type=checkbox]",function() { 
    if($(this).is(':checked')){ 
     alert('is checked'); 
    } 
}) 

問候。

Answer 3

這是解決方案。

$('#ho').on('click', function(e){ 
    e.preventDefault(); 
    $('.hi').append('<input type="checkbox" id="isAgeSelected"/>'); 
}); 
$(".hi").on('click', '#isAgeSelected', function() { 
    alert('is checked = ' + this.checked) 
}); 

也不甘示弱，如果你想嘗試http://jsfiddle.net/greenrobo/3Rugn/