ホームページ  >  記事  >  ウェブフロントエンド  >  div content_jquery の変更を監視する jquery の具体的な実装アイデア

div content_jquery の変更を監視する jquery の具体的な実装アイデア

WBOY
WBOYオリジナル
2016-05-16 17:17:371778ブラウズ

私たちは電子商取引を行っており、JavaScript フレームワークは jQuery を使用しています。開発プロセス中に、div コンテンツの変更を監視する方法という上記のタイトルに挙げた問題が発生しました。
最終的なコードが最初に示されます (関連する分析は後で行われます):

コードをコピーします コードは次のとおりです。 :

var title = $("b.facility");
var title = $('#title');//監視したい要素
title.bind ('DOMNodeInserted', function( e) {
alert(' 要素には次が含まれます: ' $(e.target).html());
}); >問題を解決するためのアイデアは次のとおりです:
まず、jQuery イベントでのchange() メソッドの定義と使用法を確認してみましょう:
要素の値が変更されると、change イベントが発生します。 このイベントは、テキスト フィールド、テキストエリア、および選択要素にのみ適用されます。 change() 関数は、変更イベントをトリガーするか、変更イベントの発生時に実行する関数を指定します。
注: select 要素とともに使用すると、オプションが選択されたときに変更イベントが発生します。テキストフィールドまたはテキストエリアで使用すると、要素がフォーカスを失ったときにこのイベントが発生します。
しかし、変更メソッドに div コンテンツの変更に関する記述がないという問題が発生します。これにはどう対処すればよいでしょうか。
フォローアップ Baidu キーワード: jquery div コンテンツの変更: 結果なし;
続行、bing キーワード: jquery div 変更をリッスンする方法 関連ドキュメントが見つかりました http://stackoverflow.com/questions/2712124/jquery -listen -to-changes-within-a-div-and-act-accordingly
大まかに理解すると、カスタム イベントを使用して問題を処理します。 採用されたコードは次のとおりです。




コードをコピー
コードは次のとおりです: $('#laneconfigdisplay').bind('contentchanged', function() { // div コンテンツが変更された後に何かを行う
alert('woo');
});
// これは上記の関数を呼び出します
$('#laneconfigdisplay').trigger ('contentchanged ');


しかし、contentchanged が何であるかについての説明はありません。
bing キーワード: jquery の div 変更の聞き方 関連ドキュメントを見つけます。
続けて、bingキーワード: jquery contentchanged 関連ドキュメントが見つかりました http://stackoverflow.com/questions/1449666/create-a-jquery-special-event-for-content-changed
この記事では、contentchanged のコンテンツ定義について詳しく説明します。コードは次のとおりです:




コードをコピー
コードは次のとおりです: jQuery.fn。 watch = function( id, fn ) { returnthis.each(function(){
var self = this;
var oldVal = self[id];
$(self).data(
'watch_timer',
setInterval(function(){
if(self[id] !== oldVal) {
fn.call(self, id, oldVal, self[id]);
oldVal = self[id] ;
}
},100)
returnself
}; function( id ) {
returnthis.each(function(){
clearInterval( $(this).data('watch_timer') );
}); >
カスタム イベントの作成




コードをコピー


コードは次のとおりです:


jQuery。 fn.valuechange = function(fn) {
returnthis.bind('valuechange', fn); jQuery.event.special.valuechange = { setup: function() { jQuery(this).watch(' value', function(){ jQuery.event.handle.call(this, {type:'valuechange'}); }); teardown: function() {
jQuery(this).unwatch('value');
}
}; この解決策は完璧であるようです。しかし、後で確認し続けると、さらに多くのコードがあることがわかりました。 簡潔に言うと、コードは次のとおりです。




コード

をコピーします。
コードは次のとおりです:


var title = $( "b.facility");
var title = $('#title');// 必要な要素
title.bind('DOMNodeInserted', function(e) {
alert( '要素には次のものが含まれます: ' $(e.target).html());
});
これが私に必要なコードだと思うので、そうしてください!いいです
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。