3

これが私の問題の例です：

HTML

<p><a class="clickme" href="#">I would like to say:</a></p>

jQuery

$("a.clickme").click(function() {
    $('p').append('<div><a href="#" id="say-hello">Hello</a></div>');
});

$("#say-hello").click(function(){
    alert('test hello');
});

サンプルコードのフィドルは次のとおりです。 http://jsfiddle.net/johnmorris/2UVYd/2/

最初のクリック機能は問題なく起動します。ただし、アラート (またはその他の関数) は、新しく追加された要素では発生しません。追加された要素がページの読み込み時に存在しなかったことを基本的に理解しているため、jQueryはそれを「認識」しません...したがって、2番目のクリック機能は起動しません。

私はそれを回避する方法があるかどうか疑問に思っています。もしそうなら、それは何ですか。私はこれを理解することができないようです。

4

4 に答える 4

6

$("#say-hello")クリック ハンドラーにバインドすると dom に存在しないため、コードは機能しません。

ただし、後で「p」に追加される.onID を持つ要素を探す以下の構文のように使用できます。say-hello

デモ

  $("p").on('click', '#say-hello', function(){
    alert('test hello');
  })
于 2012-04-13T17:48:58.897 に答える
1

要素が存在するまで、イベントの割り当てを待つ必要があります。

$("a.clickme").click(function() {
    $('p').append('<div><a href="#" id="say-hello">Hello</a></div>');
    $("#say-hello").click(function(){
        alert('test hello');
    });
});

click新しく作成されたアンカーの割り当ては、他のclickコールバックの内側にあることに注意してください。

p@Vega は、アンカー自体の代わりに「say-hello」のクリックを割り当てる「委任」と呼ばれる別の手法を使用しています。pアンカーがクリックされると、イベントが DOM を介して「泡立ち」、タグのイベント リスナーによって捕捉されます。これは正しく機能しますが、これは委任の適切なタイミングではない可能性があります。通常、デリゲーションは、すべてが同じイベントを処理する必要がある共通のコンテナー (UL 内の LI など) 内にアイテムのコレクションがある場合に使用されます。「こんにちは」が 1 つしかない場合は、委任を使用しないことをお勧めします。</p>

ボタンを複数回クリックして複数回挿入できるようにする必要がある場合は、委任が適切なオプションかもしれません (ただし、ハードコードされた ID の使用をやめる必要があります)。または...次のようにすることもできます：

$("a.clickme").click(function() {
    $('<div><a href="#" class="say-hello">Hello</a></div>').find('.say-hello')
            .click(function(){
                alert('test hello');
            })
        .end()
        .appendTo('p');
});

このコードは、新しく作成された要素を実際に掘り下げて、DOM に追加する前にイベントをアタッチします。(ああ、「say-hello」の id ではなく className を使用していることに注意してください。)

于 2012-04-13T17:58:28.287 に答える
0

これを試すこともできます。これにより、同じ ID を持つ複数の DOM 要素を作成する問題を回避できます。1 から 100 までの乱数を ID 名に追加することで、それぞれにランダムな ID を与えます。

<script>
    $("a.clickme").click(function() {
        var newId = "say-hello" + Math.floor((Math.random()*100)+1);
        $('p').append('<div><a href="#" id="' + newId +'">Hello</a></div>');

        $("#"+newId).click(function(){
            alert('test hello');
        })
    });

</script>

既存のクリック内にクリック ハンドラーを追加したことに注意して<a>ください。

ランダムは競合がないことを保証するものではありませんが、範囲を十分に大きくすると、安全な仮定になります。または、カウンターを使用して、ID の競合がないことを確認します。

于 2012-04-13T17:54:49.237 に答える