JQuery动态复选框隐藏动态滑块不起作用

Question

我有一个带滑块和复选框的表单，根据选中或取消选中的复选框，我需要隐藏一个滑块。这两个元素都是由JQuery在对话框中创建的。

动态输入的两行代码是：

$('#msgBox').html($('#msgBox').html() + '<div class="table-row"><div class="table-col-l">Number:</div><div class="table-col-r"><input id="lunchtbc" type="checkbox"> TBC</div></div></div>')
$('#msgBox').html($('#msgBox').html() + '<div class="table-row" id="lunchnumber"><div class="table-col-l">Number:</div><div class="table-col-r"><div id="lunchnum"></div><span id="lunchno"></span></div></div></div>')

进一步低于此代码：

$('#lunchtbc').on('click',function() {
    $('#lunchnumber').hide()
});

我不确定为什么这只是不想工作（我也尝试过设置相同结果的单选按钮）。

Answer 1

你应该尝试delegating它。所以在你的情况下它可能是：

$('body').on('click', '#lunchtbc', function(){
    $('#lunchnumber').hide()
});

这将起作用的原因是因为您可能尝试在复选框不存在的情况下绑定点击。因此，通过委托它，它也将适用于动态添加的元素。

我在JSfiddle (here)上对其进行了测试，但确实有效。