2012-04-20 16 views
2

私はindex.phpを持っており、load.phpからコンテンツをロードするためにjQuery .load()を使用しています。jQuery:.load()でロードされた要素でトリガーが発生しません

index.phpにある要素に対してイベントをトリガーすると、イベントが発生します。同じ要素で、.load()をindex.phpにロードすると、イベントは発生しません!

なぜですか?私はsthを間違っているのですか?

たとえば、 Firebugは、要素の#IDは、それがあるべきまったく同じですが、このようにも機能が働きません:

$('#clickme').click(function() { 
    alert('hello'); 
}); 

同じ機能の動作、要素は、index.phpの中に配置してロードされていない場合。負荷()。何か案は??

ありがとうございます!

+0

ドキュメントを準備して関数をラップしましたか?私は確信していませんが、私は、AJAXがロードされたときにイベントがトリガされないと思います...誰かがこれを確認できますか? – Helmut

答えて

2

clickイベントバインダーは、実行後に作成されたエレメントに結合しない:あなたはこのような何かをする必要があります。​​メソッドの直後にclickリスナーを追加するか、liveまたはdelegateなどを使用してDOMの要素パターンにバインドできます。

+0

これは、既にindex.phpに同じ要素(例:#clickmeなど)がありますが、.load()の後に別の#clickmeに置き換えられた場合、これは機能しますか? – Chris

+0

Hmmm ...あなたが要素を破壊して再作成した場合、イベントリスナーは破壊されますが、おそらく再作成されないと思います。私は確信していませんが、 'click()'の代わりに 'live()'を使って問題を回避するのは簡単です。 –

+0

ああ、ありがとう。あなたの速い回答には大変感謝しています!私はjQuery側で.live()からの例を試してみましたが、これはうまく動作します:$( "a.offsite")live( "click"、function(){alert( "Goodbye!");}) ;だから、もう一度ありがとう! :) – Chris

3

clickを使用すると、呼び出された時点で要素にイベントリスナーが作成されます。要素が存在しない場合は、clickと呼ばれ、リスナーは作成されません。 on(以前のバージョンのjqueryではdelegate)を使用してイベント委任を使用する必要があります。

on documentationをご覧になり、委任についてお読みください。

$("<selector of static ancestor>").on("click", "#clickme" , function(){}) 
+0

申し訳ありませんが、私がすぐに理解できない場合...あなたの例では、James、<セレクタの静的セレクタ>は何ですか? – Chris

+0

これは、動的にロードされていない '#clickme 'の祖先要素へのセレクタです。負荷がかかる要素。それ以外の場合は 'document'にすることができますが、より具体的なものが優先されます。 –

関連する問題