使用多个动态jquery

我正在尝试使用下面的代码

$（'#monbus1'）。更改（函数（）{
$（“#montype1”）.toggle（）；
});

要编辑一组动态div，我想知道我是否必须为我想要显示的每个div制作一个动态div，或者是否有一种方法可以自动完成，这样我就不必有15个动态div（我允许使用最多15个框来制作）

$("#monaddButton").click(function () {
if(moncounter>15){
        alert("Only 15 textboxes allowed,if more needed let me know");
        return false;
}   

var MonNewTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'Mondiv' + moncounter);

MonNewTextBoxDiv.after().html('<div><label>Arrival time:</label><input type="time" id="monarr' + moncounter + '" name="monarr' + moncounter + '"></div><div><label>Place/Location:</label><input type="text" id="monadd' + moncounter +
'" name="monadd' + moncounter + '"></div><div><label>Work/Activities:</label><input type="textbox" id="monadd' + moncounter + '" name="monadd' + moncounter +
'"></div><div><label>Departure time:</label><input type="time" id="mondep' + moncounter + '" name="mondep' + moncounter + '"></div><label>Bus</label><input type="checkbox" id="monbus' + moncounter +
'" name="monbus' + moncounter + '"><label>Walking</label><input type="checkbox" id="monwal' + moncounter + '" name="monwal' + moncounter + '"><label>Other</label><input type="checkbox" id="monoth' + moncounter +
'" name="monoth' + moncounter + '"><div id="nummonbus' + moncounter + '" style="display:none">Bus #:<input type="text" id="busmon' + moncounter + '" name="busmon' + moncounter + '" size="4"></div><div id="nummonoth' + moncounter +
'" style="display:none">Other:<input type="text" name="othmon' + moncounter + '" id="othmon' + moncounter + '"></div>');

MonNewTextBoxDiv.appendTo("#Mondaydiv");`

$（“#monaddButton”）。单击（函数（）{
如果（计数器>15）{
警报（“只允许15个文本框，如果需要更多，请告诉我”）；
返回false；
}   
var MonNewTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“Mondiv”+moncounter）；
MonNewTextBoxDiv.after（）.html（'到达时间：地点/地点：工作/活动：出发时间：公共汽车行走其他公共汽车#：其他：'）；
MonNewTextBoxDiv.附录（“#Mondaydiv”）`

我一直在努力解决这个问题，但我仍在学习如何使用动态内容，我修复了其他一些小错误，但无法解决这个问题，非常感谢您的帮助
您需要使用事件委派-

$('#Mondaydiv').on('change','#monbus1',function() {
   $('#montype1').toggle();
});

在所有
monbus
输入上绑定
change
事件-

$('#Mondaydiv').on('change','[id^=monbus]',function() {
       var count = this.id.replace('monbus','');
       $('#montype'+count).toggle();
});

您需要做的是选择您感兴趣的所有div，并将change函数应用于所有div

如果id为Mondaydiv的div包含要应用该函数的所有子div，则可以使用
。该div的子div上的每个
函数添加此更改函数：

$('#Mondaydiv').children().each(function() { 

    $(this).change(function() { 
           $(this).toggle(); 
    });

);

这假设
#Mondaydiv
的唯一子级是您要将其应用到的
monbus*
div。如果不是这样，您需要以另一种方式选择它们，例如为它们提供一个唯一的类，并使用
find
函数将该类作为“#Mondaydiv”上的选择器。
这有点过分了ard可以准确地解析您希望发生的事情，但我建议您使用CSS类而不是ID来针对所讨论的元素，并在元素之间添加映射

例如，将
monbus
类添加到当前ID前缀为
monbus
on的所有
输入中。同时添加
data-
属性以指示相应的元素。因此，不要：

'<input type="checkbox" id="monbus' + moncounter + '" name="monbus' + moncounter + '">'

请不要在javascript中使用字符串构建html。
'<input class="monbus" data-toggle="montype' + moncounter + '" type="checkbox" id="monbus' + moncounter + '" name="monbus' + moncounter + '">'

$('.monbus').change(function() { 
    var whatToToggle = $(this).data('toggle'); 
    $('#' + whatToToggle).toggle(); 
});