jQueryは、動的に作成された要素にバインドされたハンドラを実行しません。

Question

Jqueryを使用して、自分のWebサイトのページを動的に読み込みます。あなたがクリックしたメインメニューオプションに応じて、基本的にdivを表示して表示します。

この問題は、各ページにあるサブメニューに問題があります。ページが変わるとメニューが変わります。私は<ul>を空にして、新しいページを変更するたびに<li>を追加します。

サブメニュー<li>にあるjquery hoverとclick機能は、ページが最新表示されている場合にのみ機能します。 <li>を削除して新しい機能を追加したため、機能が停止しているようです。

なぜ機能が新しい<li>に行かないのかわかりません。

これはなぜですか？

Answer 1

あなたの問題は、.live（）メソッドを使用していない可能性があるからです。http://api.jquery.com/live/を参照してください。新しいliが追加されると、DOMが既にロードされているので、新しいliタグは.hover（）などの任意のイベントで接続する資格はありません。これはまさにあなたが探しているものではないかもしれませんが、十分に近くにある必要があります。

Answer 2

私は同じ問題がありました。 jQueryは、jQueryスクリプトがロードされるときに存在する要素（ページロード）のみにイベントをバインドできます。イベントが新しく作成された要素に影響を与えるようにするには、コードに.liveを追加する必要があります。このよう ：

この上

詳細については、私は同じまたは類似のことを行うなど.bindのようないくつかの追加コマンドが存在すると信じて、私はいつも.live Iを使用しているhttp://api.jquery.com/live/ で発見することができます

$(".menu").live("hover", function(){ 
    // your action here 
}); 

助けることを望む！

Answer 3

非推奨の新しい方法は、.on()ハンドラをjQuery 1.7として使用することです。 .live()の代わりにこのバージョンを使用している場合は、次を使用してください。

$('#menu').on('hover', 'li', function() { ... });