javascript - 在追加中调用删除按钮

Question

这是我用来附加名称输入字段的脚本-

<script>
    $(document).ready(function() {
        $("#add").click(function() {
            var someId = document.getElementById('someId').value;
            var name =  document.getElementById('name').value;

            $('.print_box').append('<div class="' + someId + '"> <tr> <td> <input type="button" ref="'+someId+'" class="remove_button" value="Remove"></td>  <td><input type="text"  multiple name="name[]" value="' + name + '" </td>  </tr>

        });
    });

</script>  

现在我想从单独的独立脚本中调用删除按钮，例如 -

<script>
    $(document).ready(function() {
        $(".remove_button").click(function() {
            var getRemoveID = $(this).attr('ref');
            $("." + getRemoveID + "").remove();

        });
    });
</script>

但这不起作用。仅当删除功能包含在附加中时才有效，例如 -

<script>
    $(document).ready(function() {
                $("#add").click(function() {
                        var someId = document.getElementById('someId').value;
                        var name = document.getElementById('name').value;
                        $('.print_box').append('<div class="' + someId + '"> <tr> <td> <input type="button" ref="' + someId + '" class="remove_button" value="Remove"></td>  <td><input type="text"  multiple name="name[]" value="' + name + '" </td>  </tr>



$(".remove_button").click(function() {
                                var getRemoveID = $(this).attr('ref');
                                $("." + getRemoveID + "").remove();
                            });
                        });
                });
</script> 

现在，我怎样才能分离这两个函数？我的意思是在附加脚本之外调用删除按钮？？

Answer 1

只需使用on

$("body").on("click", ".button", function() {              
    alert("click")
});

https://codepen.io/anon/pen/BxRNjM