Question

我有一个简单的代码，有2个div。一个div包含一个名为“add”的按钮。单击它时，将在第二个div中添加其他按钮。当您单击第二个div中的任何按钮时，它会自行删除。正如您在下面的代码中看到的，我使用append在第二个div中添加按钮。这就是我的问题所在。如果删除按钮已经在div中，则代码有效。（意味着它在点击时会被删除）。但是，附加的按钮不会删除自己。单击后如何使附加按钮自行删除？

<title>AutoSuggestion using  Ajax, Jquery and PHP</title>

<script src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript">

$(document).ready(function(){


            $('#add').click(function(){
                var return_value = "appended button (click to delete me)";
                $('.seconddiv').append('<button class ="remove">'+return_value+'</button>'); 


            });
            $( '.remove' ).click(function() {
              $( this ).remove();

            });

});


</script>

<div class="firstdiv"><button id ="add" >add</button></div>
<div class="seconddiv"><button class ="remove" >click to delete me</button></div>

Answer 1

这是一个重新绑定的问题

http://jsfiddle.net/87pt31La/

$(document).ready(function(){

    //intial call on load
    bindFunc()

    $('#add').click(function(){
        var return_value = "appended button (click to delete me)";
        $('.seconddiv').append('<button class ="remove">'+return_value+'</button>'); 
         bindFunc()
    });

    //any Js code that needs to be rebinded
    function bindFunc(){
        $( '.remove' ).click(function() {
              $( this ).remove();
        });
    }


});

当你添加新的HTML时，它没有绑定到JS，所以你必须重新绑定它。

Answer 2

您可以将点击事件处理程序更改为附加到文档。

$( document).on("click", ".remove",function() {
      $( this ).remove();
});

http://jsfiddle.net/q56odb3r/

如何使用remove删除附加元素

2 个答案: