Question

我是jQuery的新手。

您是否知道为什么.remove()对使用add按钮添加的行无效？它适用于已存在的元素，例如<li>One</li>。

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.more').click(function(){
                html_frag='<li>XXX<input type="submit" value="Remove" class="testing" /></li>';
                $('ul li:last').after(html_frag);
                return false;
            });
        });

        $(document).ready(function(){
            $('.testing').click(function(){
                $(this).remove();
                return false;
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>
            One
            <input type="submit" value="Remove" class="testing" />
        </li>
    </ul>
    <input type="submit" value="Add" class="more" />
</body>
</html>

Answer 1

因为绑定该处理程序时，DOM上不存在新添加的元素。尝试使用如下的委托事件

 $(document).ready(function(){
        $(document).on('click', '.testing', function(){
            $(this).remove();
            return false;
        });
 });

Answer 2

试试这个，它不起作用，因为你动态创建元素，动态创建元素使用jquery或jquery。

   $("body").on("click", ".testing", function(event){
      $(this).remove();
          return false;
   });

为什么jQuery不删除动态添加行的工作？

2 个答案: