☰

クリックイベントは動的に生成された要素では機能しません [重複] 質問する

tag-icon • tag-icon jquery events
クリックイベントは動的に生成された要素では機能しません [重複] 質問する 
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            $("button").click(function() {
                $("h2").html("<p class='test'>click me</p>")
            });   

            $(".test").click(function(){
                alert();
            });
        });

    </script>
</head>
<body>
    <h2></h2>
    <button>generate new element</button>
</body>
</html>

ボタンをクリックしてtest、 にクラス名を持つ新しいタグを生成しようとしていました。 に関連付けられたクリック イベントも定義しました。しかし、イベントは機能しません。<h2>test

誰か助けてくれませんか？

ベストアンサー1

使用しているバインディングは「直接」バインディングと呼ばれ、すでに存在するclick()要素にのみハンドラをアタッチします。将来作成される要素にはバインドされません。これを行うには、次のコードを使用して「委任」バインディングを作成する必要があります。on()。

委任されたイベントには、後でドキュメントに追加された子孫要素からのイベントを処理できるという利点があります。

ソース

あなたが探しているものは次のとおりです:

var counter = 0;

$("button").click(function() {
    $("h2").append("<p class='test'>click me " + (++counter) + "</p>")
});

// With on():

$("h2").on("click", "p.test", function(){
    alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2></h2>
<button>generate new element</button>

上記は、jQuery バージョン 1.7 以降を使用している場合に機能します。古いバージョンを使用している場合は、以下の前の回答を参照してください。

前回の回答:

使ってみるlive():

$("button").click(function(){
    $("h2").html("<p class='test'>click me</p>")
});   


$(".test").live('click', function(){
    alert('you clicked me!');
});

私にとってはうまくいきました。それを試してみましたjsFiddle を使用します。

あるいは、新しいやり方もありますdelegate():

$("h2").delegate("p", "click", function(){
    alert('you clicked me again!');
});

更新されたjsFiddle。

おすすめ記事