Jquery monitor div content changes specific implementation ideas

  • 2020-03-26 23:06:21
  • OfStack

We do e-commerce, javascript framework using jQuery, in the development of the above title listed in the problem: how to listen for changes in div content.
Give the final code first (do the correlation analysis later) :

 
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 solution is as follows:
Let's review the definition and usage of the change() method in the jQuery event:
The change event occurs when the value of the element changes.
This event applies only to the text field, as well as the textarea and select elements.
The change() function triggers a change event, or specifies the function to run when a change event occurs.
Note: when used with the select element, 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 question arises about changing the div content and the change method doesn't say anything about it, how do we deal with that?
Follow-up baidu keywords: jquery div content changes: fruitless;
To continue, bing keywords: jquery how to listen div http://stackoverflow.com/questions/2712124/jquery-listen-to-changes-within-a-div-and-act-accordingly change to find a related document
Roughly speaking, custom events are used to handle the problem. The following code is adopted:
 
$('#laneconfigdisplay').bind('contentchanged', function() { 
// do something after the div content has changed 
alert('woo'); 
}); 
//This will call the function above
$('#laneconfigdisplay').trigger('contentchanged'); 

But what is contentchanged without saying, go ahead and trace
Bing: jquery how to listen div change find a related document
To continue, bing keywords: jquery contentchanged http://stackoverflow.com/questions/1449666/create-a-jquery-special-event-for-content-changed find a related document
This article details the contentchanged content definition, and the adoption 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 events
 
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 check later, I find that there is a more concise way. The code is as follows:
The same code at the page code block index 0
It feels like this is the code I need, do it! fine


Related articles: