jquery监听div内容的变化具体实现思路
我们做电子商务,javascript框架采用的是jquery,在开发过程中遇到了上面标题列出的问题:如何监听p内容的变化。
先给出最终代码(后续进行相关分析):
. 代码如下:
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());
});
解决问题的思路如下:
我们先回顾一下jquery事件中的change()方法定义和用法:
当元素的值发生改变时,会发生 change 事件。
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。
change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。
注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
但是问题出现了关于p内容的改变change方法中只字不提,我们如何处理那?
后续百度关键词: jquery p 内容发生变化:无果;
继续,bing关键词:jquery how to listen p change 找到一篇相关文档https://*.com/questions/2712124/jquery-listen-to-changes-within-a-p-and-act-accordingly
粗略的明白是采用自定义事件的方式去处理问题,采纳代码如下:
. 代码如下:
$('#laneconfigdisplay').bind('contentchanged', function() {
// do something after the p content has changed
alert('woo');
});
// 这样会调用上面的函数
$('#laneconfigdisplay').trigger('contentchanged');
但是contentchanged是什么内容没有说明,继续追溯
bing关键词:jquery how to listen p change 找到一篇相关文档
继续,bing关键词:jquery contentchanged 找到一篇相关文档https://*.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;
};
jquery.fn.unwatch = 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');//the element i want to monitor
title.bind('domnodeinserted', function(e) {
alert('element now contains: ' + $(e.target).html());
});
感觉这应该是我需要代码,do it !fine
推荐阅读
-
jquery监听div内容的变化具体实现思路
-
jquery获取div宽度的实现思路与代码教程
-
如何根据jquery滚动条位置加载内容的思路和实现代码详解
-
jquery获取div宽度的实现思路与代码
-
JQuery+DIV自定义滚动条样式的具体实现_javascript技巧
-
jquery获取div宽度的实现思路与代码
-
JQuery+DIV自定义滚动条样式的具体实现_javascript技巧
-
如何根据jquery滚动条位置加载内容的思路和实现代码详解
-
div中有一个iframe,要求div显示iframe的部分内容,并且要求div随着浏览器的变大或变小等比例变化,如何实现?_html/css_WEB-ITnose
-
jQuery+ajax实现鼠标单击修改内容的思路_jquery