Javascript 更改侦听器不处理JQuery Mobile中动态添加的内容
试图组合一个动态表单，但收效甚微。使用JSON文档作为源，我填充了一个两层表单方案 首先，添加一系列类别，以生成ID与类别匹配的复选框条目。然后子类别被添加到第二个div中，其中包含其父类别的类名 我想听听复选框事件来切换与父类别相关的子类别的视图。我可以使用动态生成的选择器来隐藏输入复选框元素本身，但是没有一个侦听器工作正常。我没有收到任何警报，没有任何触发。在这里无所适从，任何帮助都表示感谢 HTML代码：Javascript 更改侦听器不处理JQuery Mobile中动态添加的内容,javascript,jquery,jquery-mobile,dynamic,jquery-selectors,Javascript,Jquery,Jquery Mobile,Dynamic,Jquery Selectors,试图组合一个动态表单，但收效甚微。使用JSON文档作为源，我填充了一个两层表单方案 首先，添加一系列类别，以生成ID与类别匹配的复选框条目。然后子类别被添加到第二个div中，其中包含其父类别的类名 我想听听复选框事件来切换与父类别相关的子类别的视图。我可以使用动态生成的选择器来隐藏输入复选框元素本身，但是没有一个侦听器工作正常。我没有收到任何警报，没有任何触发。在这里无所适从，任何帮助都表示感谢 HTML代码： <body> <div data-role="" cl
<body>
<div data-role="" class="" id="page1">
<button class="ui-btn" onclick="selectTemplate();">Std Template</button> <br>
<form>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" class="checkbox" id="group1">
</fieldset>
</form>
</div>
<div data-role="" class="" id="page2">
<form>
<div data-role="controlgroup">
<fieldset data-role="controlgroup" class="checkbox" id="group2">
</fieldset>
</div>
</form>
</div>
</body>
函数addTemplateItems（模板）{
$（“#group1”）.empty（）；
$（“#group2”）.empty（）；
//$（“#group2”）.hide（）；
for（模板中的变量a）{
console.log（模板[a].name）；
$（“#组1”）。附加（“”）
+模板[a]。名称+“”）；
对于（模板[a]中的变量b）。项）{
console.log（模板[a].items[b].name）；
$（“#group2”）.append（“将其与.delegate（）一起使用）
或与.on（）一起使用
您应该尝试使用.live（）
。这也会将事件处理程序附加到动态添加的元素中。以下是相关文档：
根据后续方法重写.live（）方法非常简单；以下是所有三种事件附件方法的等效调用模板：
$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
$( document ).on( events, selector, data, handler ); // jQuery 1.7+
有了复选框，我们鼓励您使用“onclick”而不是“onchange”。看看这一点。.live（）不再被jquery推荐。相反，使用.bind（）或.delegate（）@Abhidev，从jquery 1.7开始，.delegate（）
已被.on（）
方法取代。live（）的参数是什么不再推荐用于？谢谢！delegate:function（selector，types，data，fn）{返回这个。on（types，selector，data，fn）；}
-->这是一样的，delegate（）也不推荐使用。在jquery版本<1.7中，delegate（）优先于.live（），在jquery 1.7之后，他们引入了.on（），而不是.delegate（）@mpsyp您是否已在$（document）.ready（）；？中添加了js代码？尝试了各种jQuery处理程序附件，但此链接中概述的方法是我唯一可以使用的方法。thx
function addTemplateItems (template) {
$("#group1").empty();
$("#group2").empty();
// $("#group2").hide();
for (var a in template) {
console.log(template[a].name);
$("#group1").append('<label><input id="' + template[a].name + '" type="checkbox" />'
+ template[a].name + '</label>');
for (var b in template[a].items) {
console.log(template[a].items[b].name);
$("#group2").append('<label class="' + template[a].name + '""><input id="' + template[a].items[b].name + '" type="checkbox" />'
+ template[a].items[b].name + '</label>');
console.log('"' + '.' + template[a].name + '"');
// hide initial sub-tag collection
// $('"' + '.' + template[a].name + '"').hide();
// $().hide();
}
$('label.family').hide();
var inputSelectors = [];
var name = 'family';
var inputSelector = document.getElementById(template[a].name);
// add listeners to show+hide sub-tags
$(inputSelector).change(function(){
alert('something changed.');
if ($(this).is(':checked')) {
alert(template[a].name + ' checked');
$('#' + template[a].name).show();
} else {
alert(template[a].name + ' checked');
$('#' + template[a].name).hide();
}
});
// $(inputSelector).hide();
}
$("input[type='checkbox']").checkboxradio().checkboxradio("refresh");
// $("[data-role=controlgroup]").controlgroup("refresh");
}
// add listeners to show+hide sub-tags
$(inputSelector).delegate('change', function(){
alert('something changed.');
if ($(this).is(':checked')) {
alert(template[a].name + ' checked');
$('#' + template[a].name).show();
} else {
alert(template[a].name + ' checked');
$('#' + template[a].name).hide();
}
});
// add listeners to show+hide sub-tags
$(inputSelector).on('change', function(){
alert('something changed.');
if ($(this).is(':checked')) {
alert(template[a].name + ' checked');
$('#' + template[a].name).show();
} else {
alert(template[a].name + ' checked');
$('#' + template[a].name).hide();
}
});
$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
$( document ).on( events, selector, data, handler ); // jQuery 1.7+