javascript - jQuery:观察节点值的变化

Question

我想观察使用 contenteditable 编辑的元素的 nodeValue 变化。基本上，我想在节点值发生变化时运行一个函数。

我找到这篇文章: http://james.padolsey.com/javascript/monitoring-dom-properties/

这似乎有我想要的插件。

这是 watch 插件:

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

例如，我可以像这样观察输入的值:

  $('#input').watch('value', function(propName, oldVal, newVal){
    $("#text").text(newVal);
  });

但不是 contenteditable 的节点值(它的文本内容):

  $('#ce').watch('nodeValue', function(propName, oldVal, newVal){
    $("#text").text(newVal);
  });

这是一个活生生的例子:

http://jsbin.com/iconi/edit

任何人都知道如何调整 watch 方法以使用 nodevalue。谢谢!

Answer 1

这不是更简单吗？

 $('#ce')
    .bind('change keyup',
       function() {
          $('#text')
             .text($(this).text());
       }
    );

至于输入:

 $('#input')
    .bind('change keyup',
       function() {
          $('#text')
             .text($(this).val());
       }
    );