1

ajax 経由でデータをロードしてさまざまなページを表示する index.html を持つ Web アプリケーションがあります。

data-watch="true"これらのさまざまなページで、変更を監視する必要があるいくつかの要素 (それ自体とその子を含む) に属性を配置したいと考えています。例えば：

<ul data-watch="true">
    <li>this</li>
    <li>is</li>
    <li>a</li>
    <li>test</li>
</ul>

それ自体が変更された場合ul、またはその子ulが追加/変更/削除された場合、何が変更されたかを示す関数を実行する必要があります。はul一例です。これは、多数の子を含む div である可能性もあります (また、子の中の子など)。

いくつかの調査の結果、これには Mutation Observer を使用することが最善の方法であることがわかりました。ただし、突然変異オブザーバーだけではまだうまく機能しません。その後、 Mutation Summaryという名前のライブラリを見つけました。このライブラリは、自分のやりたいことができると主張しています。思い通りに動かせません。

今私はこれを持っています：

var observer = new MutationSummary({
    callback: handleChanges,
    queries: [{
        attribute: 'data-watch',
    }]
});
function handleChanges(summaries){
    console.log(summaries);
}

しかし、このコードでは、 ajax 経由でロードされhandleChangesたときにトリガーされません。ul

ただし、属性を each に追加すると、機能しますli。しかし、検査が必要な各要素の属性を定義したくありません。すべての子を追跡する親要素に配置するだけです。これは少なくとも私には最も論理的なようです...

MutationSummaryライブラリを使用しないソリューションがある場合は、まったく問題ありません。data-watch="true"属性を持つ要素 (およびその子) に対するすべての変更 (追加、変更、または削除) がトリガーされる限り。

この件で私を助けてくれませんか？

4

1 に答える 1

0

JQuery を使用すると、一度に複数の要素にイベント リスナーを追加できます。$("ul[data-watch='true']") のようなセレクターは、関心のある要素をカプセル化する必要があります。 ajax 呼び出しの成功コールバック内の domready ステートメントでイベント リスナーをラップする場合、ハンドラーは次のように機能する必要があります。期待される。次のようになります。

$.ajaxSetup({cache:false, success:function(){
  $(document).ready(handler);
}});

function handler(){
  $("[data-watch='true']").each(function(){
    this.style.cursor = "pointer";
    $(window).on("click", this,function(){
      console.log("I'm now listening!");
    });
  });
};

Vital Dev Team 提供の ajax であるデモをここで見ることができます。

あなたのコードが現在機能していない理由については、私は MutationSummary に精通していませんが、同期コンテキストで非同期値を使用しようとすることに問題があると思います。静的スコープからの変更をリッスンすることが重要です。

「変更」dom イベントはフォームに限定されているため、システムに変更を警告するには、もう少しコードが必要になることに注意してください。.each()おそらく、従来のイベント リスナーではなく、MutationObserver をメソッドで使用することになるでしょう。それがあなたがやろうとしていることよりも簡単か難しいかはわかりません。

とにかく、それが少しでも役立つことを願っています！

于 2016-03-08T12:16:30.497 に答える