jQuery - .appendTo（）。remove（）

Question

当我点击按钮＆＃34;删除＆＃34;添加的新元素不会发生任何动作。但是当我点击它已经加载到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

使用Event Delegation：

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

<强> FIDDLE