Переопределить основные функции jQuery на уровне элементов

можно ли переопределить основные функции jQuery на уровне элемента, поэтому, например, я хочу переопределить val () функции только на один элемент.

Если я сделаю что-то подобное

var element = $('select');
var old_val = element.val;
element.val = function () {
  console.log('The new val');
  return old_val.apply(this, arguments);
}
element.val(19);

он работает так, как ожидалось, но как только я обращаюсь к тому же полю с новым экземпляром jQuery

var element = $('select');
element.val(19);

он перестает работать, потому что у нас есть новый экземпляр объекта jQuery. если я буду играть с $.сноска.Вэл!--4-- > функция i измените это поведение для всех объектов, которые поддерживают функцию val,что немного для меня.

любая помощь будет оценили. Спасибо.

11
core element function jquery override

5 ответов

Я сделал это расширение jquery для того, чтобы делать именно то, о чем вы говорите:

// overrides a method thats supposed to be called on a single node (a method like val)
$.fn.overrideNodeMethod = function(methodName, action) {
    var originalVal = $.fn[methodName];
    var thisNode = this;
    $.fn[methodName] = function() {
        if (this[0]==thisNode[0]) {
            return action.apply(this, arguments);
        } else {
            return originalVal.apply(this, arguments);
        }
    };
};

бонус над ответом Дэйва - вам не нужно загрязнять пространство имен данных jquery или беспокоиться о том, что кто-то перезаписывает этот ключ

4

на основе ответа sdleihssirhc, но измененного только для применения к ранее сопоставленным элементам, так как вы сказали " только на один элемент".

element.data('custom_val', function() {
    console.log('The new val');
});

$.fn.old_val = $.fn.val;
$.fn.val = function () {
    var custom_val = this.data('custom_val');
    if (custom_val) {
         return custom_val.apply(this, arguments);
    } else {
         return this.old_val.apply(this, arguments);
    }
};
4

этот небольшой фрагмент позволяет переопределить методы jQuery.

Я нахожу ответ @BT довольно плохим, поскольку он создает дополнительный обратный вызов каждый раз, когда используется функция. Поэтому, если вы примените его к 1000 элементам, 1000 функций для каждого val() называют!

мой overrideNodeMethod может применяться к стольким элементам столько раз, сколько вы хотите. Он в основном проверяет hasOverriddenMethod данные

var originaljQueryMethods = {};
for(var method in $.fn){        
    originaljQueryMethods[method] = $.fn[method];
};

$.fn.callOriginalMethod = function(method, args) {        
    return originaljQueryMethods[method].apply(this, args);
};        

$.fn.overrideNodeMethod = function(method, callback) {                
    var dataKey = "hasOverriddenMethod." + method;
    $(this).callOriginalMethod("data", [dataKey, callback]);
    $.fn[method] = function() {
        var callback = $(this).callOriginalMethod("data", [dataKey])
        if (callback) {
            return callback.apply(this, arguments);                
        }
        return $(this).callOriginalMethod(method, arguments);            
    };
};
2

каждый объект jQuery включает в себя selector свойство, которое содержит (duh) исходный селектор, который использовался для получения элементов (я вообще не работал с ним, поэтому я не уверен, что происходит с ним, когда вы проходите через цепочку методов).

чтобы вы могли обернуть val метод в функции, которая проверяет selector свойство, а затем решает, использовать ли вашу функцию или оригинал. Это выглядело бы примерно так:--5--> 

$.fn.old_val = $.fn.val;
$.fn.val = function () {
    if (this.selector === 'select') {
        console.log('The new val');
    }
    return this.old_val.apply(this, arguments);
};

вы в принципе не было это раньше, я просто настраиваю его, чтобы он применялся ко всем новым экземплярам jQuery.

(кроме того, это довольно упрощенно самостоятельно; вы захотите изменить/улучшить его соответственно.)

1

Да это большой вопрос. Я бы никогда не попробовал.

поехали:

прежде чем мы начнем, мы должны скопировать функцию val по умолчанию в другое место:

jQuery.fn.oldval = jQuery.fn.val;

Я бы написал функцию global, чтобы поймать функцию val ():

jQuery.fn.val = function(value) {
   var t = jQuery(this);
   if(t.get(0)) {
      //Check for overwritten function
      var func = jQuery.data(t.get(0), 'val-function');
      if(jQuery.isFunction(func)) {
         return func(value);
      }
   }
   //Use old function
   return jQuery(this).oldval(value);
};

после этого вы можете установить функцию в свой элемент-данные с помощью:

var element = jQuery(...);
jQuery.data(element.get(0), 'val-function', function(value){
   /* Your Function here */
});

Я не знаю, работает ли это. Попробовать его. Это только из моего мозга.

1