javascript - JQuery を使用して動的に作成された HTML 要素をクリックします。

Question

動的に作成した要素をクリックしてアラートを作成できるようにしたいのですが、理解できないようです。.on の使用方法について同様のスレッドを多数見てきましたが、静的要素に対してのみ機能させることができます。前もって感謝します！

<span id="about">About</span>

<div id="lhn"></div>

そして JavaScript:

$(document).ready(function () {

    $("#about").click(function () {

        $("#lhn").append("<div id='#child'>Child</div>");

        $("#lhn").on("click", "#child", function () {
            alert("Child has been clicked");
        });

    });

});

Answer 1

作成したコードには複数の問題があります。

まずは

$("#lhn").append("<div id='#child'>Child</div>");

察するに

$("#lhn").append("<div id='child'>Child</div>");

第 2 に、HTML ページの ID は一意である必要があります

だから交換

$("#lhn").append("<div id='child'>Child</div>");

と

$("#lhn").append("<div class='child'>Child</div>");

三番

既にイベントを委任しているようですので、クリック イベントを の外側に移動してくださいclick event。そうしないと、クリックするたびにイベントが要素に複数回バインドされます。

$("#about").click(function () {
    $("#lhn").append("<div class='child'>Child</div>");
});

$("#lhn").on("click", ".child", function () {
    alert("Child has been clicked");
});

Answer 2

この簡単なコードを使用して、

$("#child).live("click",function(){
    alert();
});