[英]Listview duplicates ID on adding list item Jquery Mobile
我正在建立一个自定义的Jquery移动列表,其中我有一个域列表(li)几乎没有翻转开关。
我正在动态创建拨动开关。 创建时,分配了唯一的ID。 我在创建时进行了检查,并且都具有唯一的ID。 创建翻转开关后,将添加到列表项。
刷新列表后,我可以看到与其他翻转框具有相同ID的翻转框。 我在创建时进行了验证,这很好。 创建后,它格式不正确。
我正在使用Foundation JS构建网格。
执行此操作的JavaScript代码是
for(var currentIndex = 0; currentIndex < myArray.length ; currentIndex ++){
var currentField = myArray[currentIndex];
$('#my-list').append('<li data-role="list-divider" class="my-list-by-domain">'+currentField.Name+'</li>');
for(var domainCount = 0; domainCount < (currentField.UserGoals).length ; domainCount++) {
var currentMyGoalField = (currentField.UserGoals)[domainCount];
var myGoalsDataElement = $(".my-goals-content-template .my-goals-data-row").clone();
var switchElement = ('<fieldset><div data-role="fieldcontain">' +
'<select class="my-goals-flip-switch" data-role="flipswitch" onchange="goalOnChange(' + currentMyGoalField.UserGoalId + ')" ' +
'id="my-goals-toggle-' + currentMyGoalField.UserGoalId + '">' +
'<option value="true">Yes</option>' +
'<option value="false">No</option>' +
'</select></div>' +
'</fieldset>');
$(".my-goals-label", myGoalsDataElement).text(currentMyGoalField.Name);
$("#my-goals-complete-check").empty();
$("#my-goals-complete-check").append(switchElement);
$('#my-goal-list').append(myGoalsDataElement).enhanceWithin();
}
}
相同的HTML容器是,
<div class="my-goals-content-template" style="display: none">
<div class="row my-goals-data-row">
<div class="small-9 medium-10 large-10 columns my-goals-label"></div>
<div class=" small-3 medium-2 large-2 columns">
<div id="my-goals-complete-check">
</div>
</div>
</div>
</div>
谁能帮助我理解这一点。
我发现了问题。
实际上,我必须指定控件所在的容器。
解决方法是,
$("#my-goals-complete-check",myGoalsDataElement).empty();
$("#my-goals-complete-check",myGoalsDataElement).append(switchElement);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.