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

这不是你如何解决它。你的方向错了。这里的问题是您正在尝试处理DOM 动态上添加的元素的事件。

所以你需要以这种方式处理这些元素的事件（click, mouseover等）

$(document).on('click', '.remove_button', function(){
  //Code to handle that event when click on remove_button
});

Answer 2

只需使用on

即可

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

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

调用内部的删除按钮追加

2 个答案: