jQuery - .appendTo() .remove()

Question

当我单击添加的新元素的“删除”按钮时，不会发生任何操作。但是，当我单击已经加载到html中的内容时，它将被删除。有人能解释并帮助我吗？

    <div id="ubber">
    <div class="box">
        <p>Box </p>
        <button class="btn btn-danger remove-button">Remove</button>
    </div> <!-- box -->
</div> <!-- ubber -->

<button class="btn btn-success" id="addnew">add new box</button>

<script src="jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

    //add
        $('#addnew').on('click', function(){
            $('#ubber').append('<div class="box"><p>Box <span id="sum">0</span></p><button class="btn btn-danger remove-button">Remove</button></div> <!-- box -->');
        }); 

    //remove
        $('.remove-button').on('click' ,function(){
            $(this).closest('div').remove();
        })

    });
</script>

Answer 1

为此使用事件委托：

 $(document).on('click' , '.remove-button', function(){
     $(this).closest('div').remove();
 });

小提琴