This question already has answers here:
jQuery how to bind onclick event to dynamically added HTML element [duplicate]
                            
                                (9个答案)
                            
                    
                2年前关闭。
        

    

我有以下代码:
HTML:

    <body>
      <div>
        <p  class='Go'>
          Create
        </p>
        <p class='Del'>
        Remove
        </p>
      </div>
   </body>


CSS:

.Go{
    background-color: lime;
    width:45px;
    text-align: center;
}
.bad{
    background-color:Red;
    width: 45px;
    text-align:center;
}
.Del{
    background-color:pink;
    width: 55px;
}


Javascript(jQuery)

$(document).ready(function(){
    $('.Go').click(function(){
       $('div').append("<p class='bad'>Delete</p>");
    });
    $('.bad').click(function(){
       $(this).remove();
    });
    $('.Del').click(function(){
       $('.bad').remove();
    })
});


这个想法是,每当我单击“创建”时,都会添加一个新的“删除”。

每次单击“删除”,所有的“删除”都将消失,并且每次单击“删除”,都将删除该单个删除。

除了最后一个以外的所有作品。有什么想法我在这里犯什么错误吗?

最佳答案

在这种情况下,您无法将jQuery click绑定到尚不存在的元素。您只绑定对$(document).ready()的单击。解决此问题的方法是将所需的删除操作绑定到文档就绪功能期间存在的元素。

$('body').on('click', '.bad', function(){
  $(this).remove()
})


这就是说,每当单击正文时,如果该事件目标的类为.bad,则将其删除。这样,jQuery事件被正确绑定。

这里的工作示例:https://jsfiddle.net/xexhdfzw/1/

10-07 19:24
查看更多