3

私のアプリには、jQuery のホバー イベントを使用するかなり標準的なスター投票機能があります。DOM が最初にロードされると (HTML リクエスト)、スター投票ロジックが含まれるパーシャルは、ページの残りの部分と共にレンダリングされます。ただし、パーシャルを移動して、ページと共に読み込まれるのではなく、ユーザーが必要なときに読み込むことができるようにしたいと考えています。パーシャルをロードする典型的な AJAX リクエストを作成しましたが、レンダリングされると、マウスオーバーなどのイベントに星が適切に反応しません。この問題は、AJAX 経由でフォームをレンダリングしているために発生しているのでしょうか、それともコードにバグがあるだけなのでしょうか? 助けてくれてありがとう

更新: on ハンドラーを使用して動作するようになりました。助けてくれてありがとう!

4

5 に答える 5

3

DOM にまだ存在しないノードにイベントをバインドしようとしている可能性があります。これを解決する最善の方法は、Ajax リクエストの前に存在するリスナーにバインドすることです。これは、フェッチされるコンテンツの先祖 (誤って "親" と呼ばれることもあり、先祖の 1 つのレベルにすぎません) です。たとえば、ページ自体に次のマークアップがあるとします。

<div id="ajaxContainer">
  <!-- content will be periodically replaced with Ajax -->
</div>

「ajaxContainer」は、取得しようとしているものの祖先です。次に、適切なメソッドを使用してリスナーをバインドする必要があります。昔は使用できlive()ましたが、推奨されておらず、とにかく効率的ではありませんでした。delegate()次に、効率の問題を解決するための推奨事項がありました。これon()は、 とほぼ同じパフォーマンスですdelegate()が、構文が異なります。

つまり、.on()jQuery 1.7+ を使用している場合に使用します。

Ajax 関数が、「星」として分類される一連の div 内にある、星系のマウスオーバーを含むページの一部を取得するとします。構文は次のようになります。

$(document).ready(function() {
  $('#ajaxContainer').on('mouseenter', '.stars', function() {
    $this = $(this); // cache this specific instance of a stars div as a jQuery object
    // do stuff with $this
  });
});

これは、「'mouse enter stars divs'」に一致するイベントを ajaxContainer 内でリッスンし始め、それが発生したときに何かを実行することを示しています。

于 2012-05-19T07:41:07.257 に答える
2

Ajax で作成された要素は、イベント ハンドラーに応答しません。イベント ハンドラーは、初期化時に DOM に存在する要素に対してのみ機能するためです。

委任し、DOM に存在する要素のイベントをリッスンし、動的要素のバブリングをキャッチする必要があります。

on()これには次を使用する必要があります。

$('#nonDynamicElement').on('mouseenter', '#dynamicElement', function() {
    //do stuff
});
于 2012-05-19T07:35:50.113 に答える
0

jQuery 1.7 以降では、古いバージョンの jquery には on() を使用する必要があり、live() を使用できます。

于 2012-05-19T07:40:12.633 に答える
0

jQuery には、まだ作成されていないオブジェクトにイベント ハンドラーを適用できるliveという関数があります。

コメントで述べたように、代わりにon () を使用してください。

于 2012-05-19T07:28:51.710 に答える
-1

AJAX スクリプト内で jQuery を使用する場合は、jQuery代わりに$.

jQuery( selector [, context] )

それ以外の

$( selector [, context] )
于 2012-05-19T07:31:11.733 に答える