Question

这是首先保存列表项的<ul>：

<ul style="max-width:500px" id="currentRoles" class="list-group">
     <li class="currentRole list-group-item">
            <div class="col-md-6">
                @role.Name
            </div>
            <a href="#" class="linkRemoveRole">Remove This Role</a>
     </li>
</ul>

我删除列表项并使用下面的代码将它们附加到新列表，并且工作正常：

  $('.linkRemoveRole').click(function (event) {
            var roleName = $(this).siblings().text();
            $(this).parentsUntil('#currentRoles').remove();
            $('#removedRoles').append(
              '<li class="removedRole list-group-item">'
            + '<div class="col-md-6">'
            + roleName
            + '</div>'
            + '<a href="#" class="linkAddRoleBack">Add Item Back</a>'
            + '</li>');
        }); // end of .remove_field click

然后我想通过单击上面代码创建的类“linkAddRoleBack”的链接将列表项恢复到原来的位置：

 $('.linkAddRoleBack').click(function (event) {
            var roleName = $(this).siblings().text();
            $(this).parentsUntil('#removedRoles').remove();

            //$('#currentRoles').append(
               // Irrelevant code...
               );
        });

这就是问题所在。我想要做的就是删除它的父元素，同时单击“添加角色后退”链接但事实证明我不能。我检查了控制台，似乎我无法通过

选择其父母

 $(this).parentsUntil('#removedRoles').remove();

但如果我这样做就行了

 $('.linkAddRoleBack').parentsUntil('#removedRoles').remove();

有人知道原因吗？

Answer 1

使用$（document）.on事件：

$(document).on('click','.linkAddRoleBack',function (event) {
       var roleName = $(this).siblings().text();
       $(this).parentsUntil('#removedRoles').remove();
});

我无法选择动态创建的元素的父元素

1 个答案: