Question

以下是我的脚本，其中我创建了一个按钮，但是当我点击删除按钮时，问题是单击添加按钮后创建的li。请让我知道我做错了什么

   <p>
      <ul class="">
      <li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete'  value='- Remove' /></li>
      </ul>
      </p>
      <p>
        <input type="button" name="butadd" id="butadd" value="+ Add New" />
      </p>

    $(document).ready(function () {


            $('.liDelete').click(function () {
        li = $(this).parent();
        li.remove();
    });


        $("#butadd").click(function () {
            $("ul").append("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete'  value='- Remove' /></li>");

        });
    });

Answer 1

试试这个：.on事件。

演示 http://jsfiddle.net/mT5vw/1/

$(document).ready(function () {
    $(document).on('click', '.liDelete', function () {
        li = $(this).parent();
        li.remove();
    });
    $("#butadd").click(function () {
        $("ul").append("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete'  value='- Remove' /></li>");
    });
});

Answer 2

您需要使用event delegation，因为当注册处理程序时，动态元素不存在。

 $('ul').on('click', '.liDelete', function () {
     var li = $(this).parent();
     li.remove();
 });

演示：Fiddle

删除Li不适用于动态li

2 个答案: