2

我需要知道 DOM 节点的内容何时发生变化。幸运的是，我可以确定所有这些更改都将通过调用.text(val)or来实现.html(val)。

调用这两个函数时，是否可以让 jQuery 发送事件？

4

4 回答 4

2

如果你真的需要做到这一点，你可以考虑给jQuery打猴子补丁。基本要点已编辑 - 取自参考链接：

(function($){
   // store original reference to the method
   var _old = $.fn.text;

   $.fn.text = function(text){
      // modifications go here       
      return _old.apply(this,arguments);
   };
})(jQuery);

它非常笨拙，所以我只会在它是获得所需内容的唯一方法时才考虑它，并且您必须非常小心 jQuery API 更改。

于 2013-01-15T16:48:11.357 回答
2

您可以扩展 jQuery 函数text()和html(). 我在某个地方找到了这个（对不起，我没有来源，如果你知道谁应该为此归功于它，请有人编辑），它对我来说就像一个魅力

(function ($) {
    var originalHtmlFunction = $.fn.html;
    $.fn.html = function (value) {
        if (typeof value != 'undefined') {
                var jqObj = originalHtmlFunction.call(this, value);
                // Do your magic here
                return jqObj;
        }
        else {
            return originalHtmlFunction.call(this, value);
        }
    };

    var originalTextFunction = $.fn.text;
    $.fn.text = function (value) {
        if (typeof value != 'undefined') {
                var jqObj = originalTextFunction.call(this, value);
                // Do your magic here
                return jqObj;
        }
        else {
            return originalTextFunction.call(this,value);
        }
    };

})(jQuery);
于 2013-01-15T16:49:00.590 回答
2

jsFiddle 演示

您可以像这样重载.text()（或任何 jQuery 方法），并将已更改的任何内容保存在我们可以创建的日志记录类中。这是下面的基本课程。

var textLogger = new (function textChangeLog () {  
  this.logArray = [];

  this.add = function (item) {
    this.logArray.push(item);
  };

  this.displayLog = function (index) {
    if (typeof index === 'number') { console.log( this.logArray[index] ); }
    else { console.log( this.logArray ); }
  };
})();

现在我们覆盖当前.text()并添加我们的一些添加。日志记录类和回调函数（如果您想要更多功能） 

$.fn.oldText = $.fn.text; 
// ** NOTE: At any point you can just use $('body').oldText('change it');
// to by pass any of the below changes / overrides to .text()

$.fn.text = function (str, funcEvent) {
  try {
    // Let's log anything that's being changed in our textLogger class Array
    textLogger.add($(this));

    // call the original .text()
    $(this).oldText(str); 

    // the optional event you passed in
    var callbackFunc = typeof funcEvent !== 'undefined' ? funcEvent : function () { };
    callbackFunc(); 
  }
  catch(e) { console.log(e); }
};

现在我们做一些示例用法，然后我们执行textLogger.displayLog()以在控制台中查看我们的结果。你会在一个数组中看到整个 jQuery 选择器/上下文/ID。

$('div').text('here');
$('#anotherExample').text('we changed this too!');

textLogger.displayLog();

$('#cbTest').text('blah', function () { console.log('callback!'); });

编辑更新了 jsFiddle 以显示如何在文本更改时触发/响应自定义事件。

于 2013-01-15T16:49:23.743 回答
2

是的，这是可能的，但取决于您如何使用所述方法，它可能效率不高。

$.each(["text","html"], function(i,method) {
    var oldMethod = $.fn[method];
    $.fn[method] = function(){
        this.trigger(method+"change");
        oldMethod.apply(this,arguments);
    };
});

// sample usage:
$("#someelement").on("textchange",function(){
    alert("Text Change!");
}).text("Foobar");

http://jsfiddle.net/CZCKq/

于 2013-01-15T16:49:55.583 回答