Question

我有以下代码： 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();
    })
});

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

每次点击“删除”时，所有“删除”都会消失，每次点击“删除”时，都会删除该删除。

除了最后一个之外的所有工作。有什么想法我在这里犯了什么错误？

Answer 1

在这种情况下，您无法将jQuery单击绑定到尚不存在的元素。您只绑定$（document）.ready（）上的单击。解决这个问题的方法是将您想要的删除绑定到文档就绪函数期间存在的元素。

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

这就是说，无论何时单击正文，如果该事件目标具有.bad类，则删除它。这样，jQuery事件就被绑定了。

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

点击

1 个答案: