0

複雑な UI を持つ大きな 1 ページのアプリケーションをリファクタリングする必要がありました。

document.ready 関数には次のコードがあります

$('table.datatable').dataTable({ ... params ... });
$('div.tooltip').tooltip({ ... params ... });
$('ul.dropdownMenu').menu({ ... params ... });

このコードでわかるように、さまざまな HTML コントロールを検索し、これらのコントロールの動作を実装する適切な jQuery プラグインを呼び出します。

ただし、ページは非常に動的な新しいデータテーブルであるため、ツールチップとメニューが常に追加され、アプリケーションの最初に JS 関数が呼び出されたため、適切なプラグインを手動で呼び出さない限り、これらの要素には必要な機能がありません。

DOM を変更するたびに jQuery プラグインを呼び出す必要をなくしたいのですが、どうすればよいかわかりません。

1つのオプションは、DOMに何かを追加するたびにイベントを発生させ、イベントのリスナーでこのプラグインを再呼び出しすることですが、毎回イベントを発生させることを覚えておく必要があるため、このソリューションは好きではありません.

onまだ存在しない要素に対してもイベントをアタッチするjQueryの関数について読みましたが、どのイベントが必要ですか? 私の知る限り、domchange イベントはありません。

何かアドバイスはありますか？

4

1 に答える 1

1

唯一のオプションは、新しいアイテムが DOM に追加された後にプラグインをフックすることです。最適なクロス ブラウザー オプションは、これらのタイプの要素を DOM に追加する各場所にフックし、追加の関数を呼び出して新しいアイテムを処理することです。探す必要があるのは、新しい要素が DOM に追加された後に既存のコードに簡単にフックできる場所であり、その時点でそれらの新しい要素を修正できる場所です。コードと DOM が変更された場所を知らなければ、それを行う最善の方法を実際にアドバイスすることはできません。

単一のメソッドを使用して新しいアイテムの DOM を一般的に監視することは、クロス ブラウザー方式では不可能です。 ミューテーション オブザーバーは、これを行うための最新の標準的な方法ですが、まだ多くのブラウザーではサポートされていません。 ミューテーション イベントは、ミューテーション オブザーバーよりも前に作成されましたが、現在は廃止されています。

jQuery.on()は、ここで必要なことを行いません。動的に追加された DOM 要素を処理するために使用できますが、必要な方法ではありません。プラグインは use を使用してイベントを処理するように設計されている可能性がありますが、.on()そのように設計されていてそれを利用できない限り、プラグインを書き換えずに目的の動作を実現する簡単な方法はありません。プラグインの一部。

于 2013-01-27T17:49:58.450 に答える