BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] 動的に生成された要素でクリックイベントが動作しない [duplicate］

2022-03-18 21:42:44

質問 

<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 . しかし、このイベントは動作しません。

どなたか助けてください。

解決方法は？

その click() このバインディングは、quot;direct" と呼ばれ、次の要素にのみハンドラをアタッチします。 すでに存在する . 将来作成される要素にバインドされることはありません。そのためには、quot;delegated" バインディングを 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 .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します