0

まあ、タイトルはまったく意味をなさないかもしれません..しかし、とにかく、それを明確にするためにいくつかの簡単なコードを入れます.

JQuery 1.3.2 を使用しています

ここに私のJSがあります

$(document).ready(function() {
  $('#test').click(function() {
    $('#result').html('<a href="#" id="hello">hello world</a>');
  });

  $('#hello').click(function() {
    $('#result').html('<a href="#" id="asdf">Test #2</a>');
  });
});

HTML には、ハイパーリンク id='test' と id='result' の div があります。この JS コードに期待するのは、テストをクリックすると、「Hello World」が表示されることです。その後、「Hello World」をクリックすると、「Test #2」が表示されるはずです

どんな提案も非常に役に立ちます...

ありがとうございました。

4

3 に答える 3

8

hobodave が言うように、これは Ajax とは何の関係もありません。

問題は、ドキュメントがロードされたとき (DOM 準備完了時) に、click() 関数が HTML にアタッチされることです。ただし、その時点では、Hello world div はまだ存在していません。作成時には、クリック イベントはありません。

必要なのは、新しい div が追加されたときに click() を追加するか、 live()関数を使用してイベント ハンドラーをアタッチすることです。

$(document).ready(function() {
  $('#test').live('click',function() {
    $('#result').html('<a href="#" id="hello">hello world</a>');
  });

  $('#hello').live('click',function() {
    $('#result').html('<a href="#" id="asdf">Test #2</a>');
  });
});

とはいえ、必要な機能を実現するためのさらに簡単な方法は、既存の 2 つの divhide()を使用することです。show()

于 2009-07-26T22:05:45.083 に答える
2

まず、あなたの質問は AJAX とは何の関係もありません。これは純粋な JavaScript です。上記で定義している onClick リスナーは、ページの読み込み時に適切な要素 (具体的には DOM Ready イベント) にバインドされます。ページが読み込まれると、id="hello" の要素がないため、リスナーがバインドされません。

あなたがする必要があるのは、id="hello" のリスナーバインディングを id="result" のクリックイベント内にネストすることです

例えば

$(document).ready(function() {
  $('#test').click(function() {
    $('#result').html('<a href="#" id="hello">hello world</a>');
    $('#hello').click(function() {
      $('#result').html('<a href="#" id="asdf">Test #2</a>');
    });
  });
});
于 2009-07-26T22:05:51.683 に答える
0

これid="hello"は、ドキュメントレディで設定した要素のクリックイベントハンドラーは、要素がクリックされるまでDOMに存在しないため、要素にバインドされないためid="test"です。

これを解決する1つの方法は、イベントの委任とlive()コマンドを使用することです。

もう1つの方法は、要素をDOMに追加すると同時にクリックイベントハンドラーを定義することです。このシナリオでは、以下が正常に機能します

$(function() {
  $('#test').click(function() {
    $('#result')
        .html('<a href="#" id="hello">hello world</a>');
        $('#hello').click(function() {
            $('#result').html('<a href="#" id="asdf">Test #2</a>');
            // to prevent event propagation
            return false;
        });
    // to prevent event propagation
    return false;    
    });      
});

他の要素に要素を追加するための特定のjQueryコマンドがあります。このシナリオでうまく機能するのはappend()とappendTo()です。これは使用例ですappendTo()

$(function() {
  $('#test').click(function() {

    $('<a href="#" id="hello">hello world</a>')
        .click(function() {
            $(this).replaceWith('<a href="#" id="asdf">Test #2</a>')
        })
        .appendTo('#result');
    });
});
于 2009-07-26T22:42:28.287 に答える