イベントハンドラは作成された要素には適用されません

Question

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

私は

jQueryの1.3.2を使用していますが、ここに私のJS、HTMLで

$(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>'); 
    }); 
}); 

ですが、私はハイパーリンクのid = 'テスト' とID = '結果' がdiv要素を持っています。このJSコードは、テストをクリックすると、「Hello World」を表示します。その後、私は「Hello Worldのを」クリックすると、それは

任意の提案は非常に便利です...

はありがとう「をテスト＃2」を表示するようになって。

Answer 1

hobodaveによると、これはAjaxとは関係ありません。

問題は、ドキュメントがロードされたとき（DOMの準備ができているとき）にclick（）関数がHTMLに添付されていることです。しかし、その時点では、Hello World部門はまだ存在していません。作成時にクリックイベントは発生しません。

新しい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つの既存のdivにhide()とshow()を使用することです。

Answer 2

まず、あなたの質問はAJAXとは関係ありません。これは純粋なjavascriptです。上で定義したonClickリスナーは、ページのロード時に適切な要素（特にDOM Readyイベント）にバインドされます。ページがロードされると、id = "hello"の要素は存在しないため、バインドされたリスナーは取得されません。何をする必要がある巣は、ID =「こんにちは」ID =「結果」のクリックイベント

内部例えばバインディングリスナー

です

$(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>'); 
    }); 
    }); 
}); 

Answer 3

id="test"を持つ要素がクリックされるまで、それはDOMに存在しないとして、ドキュメント準備に設定id="hello"を持つ要素のクリックイベントハンドラを要素にバインドされないからです。

これを解決する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'); 
    }); 
});