为更改的内容创建一个jQuery特殊事件 [英] Create a jQuery special event for content changed
问题描述
我正在尝试创建一个jQuery特殊事件,当绑定的内容发生变化时触发。我的方法是使用setInterval检查内容,并检查内容是否从上次更改。如果你有更好的做法,让我知道。另一个问题是我似乎无法清除间隔。无论如何,我需要的是检查event.special的内容更改的最佳方法。
I'm trying to create a jQuery special event that triggers when the content that is bound, changes. My method is checking the content with a setInterval and check if the content has changed from last time. If you have any better method of doing that, let me know. Another problem is that I can't seem to clear the interval. Anyway, what I need is the best way to check for content changes with the event.special.
(function(){
var interval;
jQuery.event.special.contentchange = {
setup: function(data, namespaces) {
var $this = $(this);
var $originalContent = $this.text();
interval = setInterval(function(){
if($originalContent != $this.text()) {
console.log('content changed');
$originalContent = $this.text();
jQuery.event.special.contentchange.handler();
}
},500);
},
teardown: function(namespaces){
clearInterval(interval);
},
handler: function(namespaces) {
jQuery.event.handle.apply(this, arguments)
}
};
})();
并按以下方式绑定:
$('#container').bind('contentchange', function() {
console.log('contentchange triggered');
});
我得到console.log的内容改变了,但不是console.log'contentchange triggered' 。所以很明显,回调永远不会被触发。
I get the console.log 'content changed', but not the console.log 'contentchange triggered'. So it's obvious that the callback is never triggered.
我只是使用Firebug来更改内容并触发事件,以测试它。
I just use Firebug to change the content and to trigger the event, to test it out.
更新
我不认为我做得这么清楚,我的代码实际上不起作用。我正在寻找我在做错什么。
Update
I don't think I made this clear enough, my code doesn't actually work. I'm looking for what I'm doing wrong.
是任何感兴趣的人的完成代码
(function(){
var interval;
jQuery.event.special.contentchange = {
setup: function(){
var self = this,
$this = $(this),
$originalContent = $this.text();
interval = setInterval(function(){
if($originalContent != $this.text()) {
$originalContent = $this.text();
jQuery.event.handle.call(self, {type:'contentchange'});
}
},100);
},
teardown: function(){
clearInterval(interval);
}
};
})();
感谢Mushex帮助我。
Thanks to Mushex for helping me out.
推荐答案
还请查看James 类似的脚本(声明为jquery对象方法而不是事件)
also take a look to James similar script (declaring as jquery object method and not as event)
jQuery.fn.watch = function( id, fn ) {
return this.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)
);
});
return self;
};
jQuery.fn.unwatch = function( id ) {
return this.each(function(){
clearInterval( $(this).data('watch_timer') );
});
};
并创建特殊事件
jQuery.fn.valuechange = function(fn) {
return this.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');
}
};
无论如何,如果你只需要它作为事件,你的脚本是好的))
Anyway, if you need it only as event, you script is nice :)
这篇关于为更改的内容创建一个jQuery特殊事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!