Specific implementation ideas for jquery monitoring changes in div content

Specific implementation ideas for jquery monitoring changes in div content_jquery

WBOY

Release： 2016-05-16 17:17:37

Original

1753 people have browsed it

We do e-commerce, and the JavaScript framework uses jQuery. During the development process, we encountered the problem listed in the title above: how to monitor changes in div content.
The final code is given first (relevant analysis will be done later):

Copy the code The code is as follows:

 
var title = $("b.facility"); 
var title = $('#title');//the element I want to monitor 
title.bind('DOMNodeInserted', function( e) { 
alert('element now contains: ' $(e.target).html()); 
}); 

The ideas to solve the problem are as follows:
Let’s first review the definition and usage of the change() method in jQuery events:
When the value of an element changes, the change event occurs.
This event only applies to text fields, textarea and select elements.
The change() function triggers the change event, or specifies a function to run when the change event occurs.
Note: When used with select elements, the change event occurs when an option is selected. When used with a text field or text area, this event occurs when the element loses focus.
But the problem arises that there is no mention in the change method about changing the div content. How do we deal with that?
Follow-up Baidu keywords: jquery div content changes: no result;
Continue, bing keywords: jquery how to listen div change Found a related document http://stackoverflow.com/questions/2712124/jquery -listen-to-changes-within-a-div-and-act-accordingly
A rough understanding is to use custom events to handle the problem. The adopted code is as follows:

Copy code The code is as follows:

 
$('#laneconfigdisplay').bind('contentchanged', function() { 
// do something after the div content has changed 
alert('woo'); 
}); 
// This will call the above function 
$('#laneconfigdisplay').trigger('contentchanged '); 

But there is no explanation of what contentchanged is, continue to trace
bing keyword: jquery how to listen div change Find a related document
Continue, bing keyword: jquery contentchanged found a related document http://stackoverflow.com/questions/1449666/create-a-jquery-special-event-for-content-changed
This article explains the contentchanged content definition in detail. The adopted code is as follows:

Copy code The code is as follows:

 
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; 
}; 
jQuery.fn.unwatch = function( id ) { 
 returnthis.each(function(){ 
clearInterval( $(this).data('watch_timer') ); 
}); 
}; 

Create custom event

Copy code The code is as follows:

 
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'); 
} 
}; 

It seems that this solution is perfect, but when I continue to check it later, I find that there are more In a concise way, the code is as follows:

Copy the code The code is as follows:

 
var title = $( "b.facility"); 
var title = $('#title');//the element I want to monitor 
title.bind('DOMNodeInserted', function(e) { 
alert( 'element now contains: ' $(e.target).html()); 
}); 

It feels like this should be the code I need, do it! fine