我有一个包含三个输入的 html:
HTML:
<div class="form-group" id="item-list0">
<label>Role Name</label>
<input asp-for="RoleClaimList[0].Role.Name" class="form-control roles" />
<div id="claim-list0">
<label>Claim Type</label>
<input asp-for="RoleClaimList[0].ClaimList[0].Type" class="form-control claimType" />
<label>Claim Value</label>
<input asp-for="RoleClaimList[0].ClaimList[0].Value" class="form-control claimValue" />
</div>
<a href="#" id="addClaim">Add another claim</a>
</div>
<a href="#" id="add">Add another role</a>
如您所见，我有两个操作“添加另一个角色”和“添加另一个声明”
如果我按添加另一个声明，它只会复制Claim Type 和Claim Value 输入
如果我按“添加另一个角色”，它会再次添加所有输入
我用 Jquery 实现了这一点:
<script>
$(function () {
var roleIndex = 0;
var claimIndex = 0;
$("#add").click(function (e) {
e.preventDefault();
roleIndex = roleIndex + 1;
claimIndex = 0;
var n = '<div id="item-list' + roleIndex +'"><label>Role Name</label><input class="form-control" name="RoleClaimList[' + roleIndex + '].Role.Name" /></div>'
var m = '<div id="claim-list' + roleIndex+'"><label>Claim Type</label><input class="form-control" name="RoleClaimList[' + roleIndex + '].ClaimList[' + claimIndex + '].Type" />'
var c = '<label>Claim Value</label><input class="form-control" name="RoleClaimList[' + roleIndex + '].ClaimList[' + claimIndex + '].Value" /> </div>'
$("#item-list" + (roleIndex - 1) + "").append(n);
$("#claim-list" + (roleIndex - 1) + "").append(m);
$("#claim-list" + (roleIndex - 1) + "").append(c);
});
$("#addClaim").click(function (e) {
e.preventDefault();
claimIndex = claimIndex + 1;
var m = '<div id="claim-list' + claimIndex + '"><label>Claim Type</label><input class="form-control" name="RoleClaimList[' + roleIndex + '].ClaimList[' + claimIndex + '].Type" />'
var c = '<label>Claim Value</label><input class="form-control" name="RoleClaimList[' + roleIndex + '].ClaimList[' + claimIndex + '].Value" /> </div>'
$("#claim-list" + (claimIndex - 1) + "").append(m);
$("#claim-list" + (claimIndex - 1) + "").append(c);
});
});
</script>
如果我添加声明，它会正常工作。当我添加新角色时，问题就开始了。它应该以与第一个相同的顺序复制第一个树输入，但它首先创建 Claim Type 然后是 Claim Value 最后是 Role Name图片:
我在那里做错了什么？问候
最佳答案
问题在于您要附加新的 #item-list1 div 到现有的 #item-list0 , 使其成为嵌套结构。
同样适用于您的 #claim-list ，就变成了嵌套结构:
#item-list0
⤷ #claim-list0
⤷ #claim-list1
⤷ #claim-list2
⤷ #claim-list3
⤷ #item-list1
⤷ #item-list2
⤷ #item-list3
你应该做的是将它们附加到外面:
- 追加新
#item-listx至<body></body>或任何父元素。 - 追加新
#claim-list到其对应的#item-lists.
所以这将是您想要的结构:
#item-list0
⤷ #claim-list0
⤷ #claim-list1
⤷ #claim-list2
#item-list1
⤷ #claim-list0
⤷ #claim-list1
⤷ #claim-list2
如果您查看它，您的代码还会出现一些问题:
- 您将重复
id. -
claimIndex将无法正常工作，因为您每次都将其重置#add单击(如果我在添加新角色后单击“addClaim”到以前的角色会怎样？)
下面是一个可以正常工作的示例代码(我认为，实际上可能不是您的用例)。我对其进行了重组，以便无需过多解释即可轻松理解。请根据需要进行编辑以适合您的实际代码库:
var roleIndex = 0;
$('#add')
.on('click', addRole) // Add onclick handler
.trigger('click'); // Trigger it on execution to create the first set
function addRole(){
roleIndex += 1;
// Set `claimIndex` here, not outside of the scope
// because you need it in each separate added role
// so that the claimIndex of each role can correctly counts independently
var claimIndex = 0,
roleClaimList = 'RoleClaimList[' + roleIndex + ']';
var $itemList = $('<div></div>')
.addClass('form-group')
.attr('id', 'item-list-' + roleIndex);
var $roleLabel = $('<label></label>')
.text('Role Name')
.appendTo($itemList);
var $roleInput = $('<input>')
.addClass('form-control roles')
.attr('asp-for', roleClaimList + '.Role.Name')
.appendTo($itemList);
var $addClaimButton = $('<a></a>')
.text('Add another claim')
.attr('href', '#')
.addClass('addClaim')
.on('click', addClaim)
.appendTo($itemList);
$addClaimButton.trigger('click');
$itemList.insertBefore(this);
// Create this function here, not outside
// because it needs the `claimIndex` in scope
function addClaim(e){
e.preventDefault();
claimIndex += 1;
var $claimGroup = $('<div></div>')
.attr('id', 'claim-list-' + roleIndex + '-' + claimIndex)
.insertBefore($addClaimButton);
var $typeLabel = $('<label></label')
.text('Claim Type')
.appendTo($claimGroup);
var $typeInput = $('<input>')
.addClass('form-control claimType')
.attr('asp-for', roleClaimList + '.ClaimList[' + claimIndex + '].Type')
.appendTo($claimGroup);
var $valueLabel = $('<label></label')
.text('Claim Value')
.appendTo($claimGroup);
var $valueInput = $('<input>')
.addClass('form-control claimValue')
.attr('asp-for', roleClaimList + '.ClaimList[' + claimIndex + '].Value')
.appendTo($claimGroup);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="item-list-0"></div>
<a href="#" id="add">Add another role</a>要了解有关范围界定的更多信息，请阅读此 amazing answer .
关于jquery - 附加 html 创建具有不同顺序的输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53271285/