javascript - jQueryで動的に追加された要素にイベントをアタッチする

Question

これが私のコードです：

$("#strong-against .pick .data .actions .btn-success").on("click", function () {
    //Magic here.
});

.on()ドキュメントの読み込みが完了した後でも、追加されたアイテムにイベントを動的に添付するため、使用する必要があることを読みました。

それでも、これらのアイテムを動的にロードした後、イベントは発生しません。ドキュメントの読み込み後に追加したアイテムがリッスンされるようにするにはどうすればよいですか？

Answer 1

試す、

$(document).on("click", "#strong-against .pick .data .actions .btn-success", function () {
    //Magic here.
});

2つの手順に従って、動的要素のイベントハンドラーをバインドします。

1. 要素が動的に追加される最も近い親要素を見つけます。
2. 2番目の引数として動的要素セレクターを使用して、ハンドラーを親要素にバインドします。

したがって、#strong-againstページの読み込み時に存在する場合は、次のことができます。

 $("#strong-against").on("click", ".pick .data .actions .btn-success", function () {
    //Magic here.
 });