jquery - 動的に追加された要素でイベント リスナーが機能しない

Question

jQueryを使用して、送信ボタンが押されたときにドキュメントにh1タグを追加しています。後で (マウス クリックで) この h1 タグを操作したいので、イベント ハンドラーを追加する必要があります。ただし、クリックを登録していないようです。

SOでこの質問が以前に尋ねられたのを見たことがあります.on()を使用していると彼らは言いますが、まだ運がありません。エラーも発生していないので、どこから始めればよいかわかりません。

これは、すべての非常に単純化されたバージョンのjsFiddleです。ありがとう。

$("h1").on("click", function(){
    alert("test");
    $("h1").css("color","red");
})

Answer 1

これを使って ：

$(document.body).on("click", "h1", function(){
    alert("test");
    $("h1").css("color","red");
})

jquery セットを呼び出す場合、jquery セットonには、h1. document.bodyが確実に含まれる任意の要素に置き換えることがh1できます。

サイドノート ：

$(this).css("color","red");の代わりに本当にしたくないです$("h1").css("color","red");か? を使用すると、すべてではなく$(this)クリックした色が変わります。h1h1

Answer 2

これを試して

JSコード

$(document.body).on("click", "h1", function(){
    alert("test");
    $(this).css("color","red");
});

ライブデモ