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) 上测试过它，它有效。

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

JQuery dynamic checkbox to hide dynamic slider not working

html

jquery

slider