点击后删除附加项

16 浏览
0 Comments

点击后删除附加项

我有以下代码：

Html：

    
        

          创建
        

        移除

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("
删除");
    });
    $('.bad').click(function(){
       $(this).remove();
    });
    $('.Del').click(function(){
       $('.bad').remove();
    })
});

我的想法是每次点击“创建”时，它都会添加一个新的“删除”。

每次点击“移除”时，所有的“删除”都会消失，每次点击“删除”时，该单个“删除”都会被移除。

除了最后一个，其他都可以正常工作。你有什么想法，我在这里犯了什么错误？

0

1 答案

0 Comments

问题的原因是在文档准备完毕时，不能将jQuery的点击事件绑定到尚不存在的元素上。解决方法是将要删除的事件绑定到文档准备函数期间存在的元素上。下面的代码演示了如何解决这个问题：

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

这段代码的意思是，每当点击body时，如果点击目标具有.bad类，则删除它。这样，jQuery事件将正确绑定。

可以在这个链接中查看工作示例：[https://jsfiddle.net/xexhdfzw/1/](https://jsfiddle.net/xexhdfzw/1/)

0