2

jQueryデータテーブルを使用していくつかのデータを表示しています。各行には編集ボタンがあり、クリックハンドラーをに登録してlive()、ページ付けで機能するようにします。すべての行に対して実行する必要があるため、クラスごとに実行しています。のようなもの: ライブクリックイベント機能を備えたデータテーブル

これは正常に機能しますが、ユーザーが再度検索を実行し、新しい結果のセットをフェッチするためにajaxリクエストを実行すると、問題が発生します。

dom内の既存のテーブルを新しいテーブルに置き換えるだけです。行1をクリックすると、行1の編集ダイアログがポップアップします。行2をクリックすると、行1の編集ダイアログがポップアップします。もう一度行2をクリックすると、行2の編集ダイアログがポップアップします。

次に、3行目を何度もクリックします。行3のダイアログが表示される前に、行2の編集ダイアログが3回ポップアップ表示されます。

これは増え続けています。div内のdataTable全体をjQueryに置き換えるのかどうかわかりませんが、なぜ複数のイベントを登録する必要があるのですか?

重要な場合は、ダイアログ初期化子でautoopenをfalseに設定し、明示的に開いたり閉じたりします。

編集(詳細)

例を作成するのに苦労しています...しかし、もう少し詳しく説明します...live()関数を使用してページ間で呼び出しを登録しているので、クリック登録メカニズムが存在することがわかりました。したがって、テーブルを同じ構造に置き換えると、の最初の呼び出しによってクリック関数が登録されますlive()live()しかし、デフォルトで別の呼び出しを行うと、2つのクリックイベントが登録されます。その後、再度交換すると、3回のイベントクリックが登録されます。click()クリックイベントが既に登録されているかどうかを確認した後、jQueryにイベントを登録してこれを克服しようとしました。複数のイベントの部分を支援しますが、データテーブルページ全体でイベントを登録しません。

4

2 に答える 2

0

ライブとajaxでこの問題が発生しました。私がやったことは、ajax応答を受信したときにイベントクリックを再登録したことです。例がなければ、解決策を推奨するのは難しいですが、バインド/クリック(デフォルト/初期表示用)を使用してページの読み込み時にクリックイベントを添付し、成功したajax応答でクリックイベントを再登録することをお勧めします。もちろん、イベントバインディングコードを関数などの再利用可能なコンポーネントに配置して、簡単に呼び出せるようにします。

于 2012-10-06T05:56:54.470 に答える
0

問題を修正しました

問題は、データテーブル行内の要素のクリックイベントに登録できないことでした。イベントはデータテーブルページ間で登録されません。

live()を使用してヘルプされたイベントを登録し、ページの変更でイベントが自動的に登録されます。

しかし、検索を行うたびに別の問題が発生するユースケースでは、データテーブルを新しいものに置き換えます。新しいデータテーブルは、これらのイベントに再度登録されます。つまり、同じ要素に対して複数のハンドラーが呼び出されるということです。live()関数が同じクラスで2回呼び出され、jqueryが2つのコールバックハンドラーが同じであるかどうかを比較することは期待されていないためです。

別の方向に進み、ページイベント( http://datatables.net/docs/DataTables/1.9.beta.1/)を使用して、ページ変更時に.live()の代わりに.click()を使用してクリックイベントを登録しようとしました。#page_details)。コンテンツが新しいページのイベントで更新される前にページ変更イベントが呼び出されたため、これは役に立ちませんでした。

また、live()の代わりにclick()を使用し、 https://stackoverflow.com/a/6361507/161628の例を使用してまだ登録されていない場合にのみクリックをバインドしてみました。この手法は、テーブルの置換では機能しましたが、複数のページでは機能しませんでした。

最終的に、.die()関数を見つけました。live()関数を呼び出す前に呼び出します。live()を呼び出すと、ページ変更時にイベントハンドラーが登録され、die()を呼び出すと、そのクラスの要素で以前に行われたlive()イベントの登録が解除されます。この方法でlive()関数を複数回呼び出すことは避けます。

于 2012-10-06T16:04:13.897 に答える