选中输入复选框后发出警报

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/

，也要小提琴