1

テーブルを動的にロードするページがあります。のいずれかにキーワードが含まれているかどうかを確認しtd、それに応じて CSS スタイルを変更したいと考えています。

最初のロードではすべてがうまく機能しますが、テーブルで何かが変更されると、関数がトリガーされません。

これが私のコードです。1 番目のブロックはうまく機能しますが、2 番目のブロックは機能しませんか?

 $( document ).ready(function() {
        $("tr td:contains('*')").each(function(){
            $(this).parent("tr").css({ "background-color": "red" });
            $(this).parent().children().css({ "background": "inherit" });
        });
    });

jQuery('body').on('change', '.content', function () {
    $("tr td:contains('*')").each(function(){
        $(this).parent("tr").css({ "background-color": "red" });
        $(this).parent().children().css({ "background": "inherit" });
    });
});
4

3 に答える 3

1

私が正しく理解していれば、テーブル自体の変更、つまり、内部の html の変更、行の追加などをリッスンしようとしています。

残念ながら、イベントが発生していないのは、要素の が変更されたchangeときにのみイベントが発生するためです。valueテーブル、行、セルにはそのようなプロパティはありません。

ここにある変更イベントに関するjQueryのドキュメントから：

このイベントは、要素、ボックス、および要素に限定されます。選択ボックス、チェックボックス、およびラジオ ボタンの場合、ユーザーがマウスで選択を行うとすぐにイベントが発生しますが、他の要素タイプの場合、要素がフォーカスを失うまでイベントは延期されます。

初めて機能する理由は、もちろん、changeイベントでラップしていないためです。オンレディ関数が起動するとすぐに起動します。もちろん、セレクターは正常に機能します。テーブルは、探しているイベントを決して発生させません。

私は個人的にこれを自分で行ったことはありませんが、SO で見つかった 1 つの解決策をここで見ることができます。これには、何かが変更されたかどうかを常にチェックするタイプのポーラーを設定することが含まれます。また、カスタム イベントを設定して起動する方法についても説明し、コードを管理しやすい部分にさらに分割します。

どうやら、jqGrid の使用についても議論しているようです。これには、同様に検討したい更新イベントがあります。

それが役立つことを願っています。

編集

を利用することもできますMutationObserver。そのドキュメントはここにあります。SO での使用のかなり良い例のように見えるものはここにあります。SO の例では、ポスターは IE 7 までさかのぼってブラウザーでテストしたことを示していますが、これによると、それMutationObserver自体は 100% 互換性がないため (おそらくポリフィルを使用している可能性があります)、適切にテストするようにしてください。

于 2013-10-02T14:32:43.920 に答える
0

皆さんの助けに感謝します。ここで見つけたカスタムビルドプラグインを使用して解決策を見つけました:

jQuery ウォッチ div

それは私にとって魅力のように機能します！

于 2013-10-03T07:57:55.617 に答える