jquery - 動的に作成されたボタンのjQueryクリックバインド: div全体がクリックに反応します

Question

DIV を動的に作成します。

        shareVisual = '<div class="individual-share">' + '<input type="number" value="1" /> X ' + classname.val() + '@' + classcurrency.val() + ' ' + classprice.val() + ' per share ' + '<button type="button" class="remove-share">Remove</button></div>';
        listOfSharesBox.append(shareVisual);  

---

次に、親 div にバインドを追加します。

$("#list-of-shares").bind('click', '.remove-share', function(e) {
    $(e.target).closest("div").remove();
})

問題: 動的に生成された DIV の任意の部分をクリックすると、div が削除されます。ボタンがクリックされたときにのみ機能するようにする必要があります。何を変更する必要がありますか?

Answer 1

on、 notを使用しbindて、セレクターでデリゲートします。

$("#list-of-shares").on('click', '.remove-share', function(e) {

Answer 2

$("#list-of-shares").on('click', '.remove-share', function(e) {
    $(this).closest("div").remove();
})