Question

我需要知道DOM节点的内容何时发生变化。幸运的是，通过致电.text(val)或.html(val)，我确信所有这些更改都会发生。

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

Answer 1

如果你真的需要完成这个，你可以考虑monkey-patching 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的变化。

Answer 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);

Answer 3

<强> jsFiddle DEMO

您可以像这样重载.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（）以在控制台中查看我们的结果。您将在Array中看到整个jQuery选择器/上下文/ ID。

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

textLogger.displayLog();

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

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

Answer 4

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

$.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/

有人在jQuery中调用text（）或html（）时是否可以获取事件？

4 个答案: