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

Question

我希望在类中单击链接 append html 输入复选框后，在单击输入复选框后得到警报 is checked。

我试过如下代码，但对我不起作用:

演示: 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

您需要委托(delegate)，因为您的元素在绑定(bind)时不存在 - 或者在元素存在后绑定(bind)

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

http://jsfiddle.net/5dYwG/

这样做会将事件处理程序绑定(bind)到您的一个/多个 class=hi 元素 - 因为它在 dom 准备就绪时存在，并且是您要将复选框附加到的元素。然后它会在事件从您的复选框冒泡时监听事件并处理它们。

另一件事是始终将您的绑定(bind)包装在 document.ready 函数中，这样它会等到您的 dom 加载完毕后再尝试绑定(bind)事件处理程序。

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

编辑

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

FIDDLE