是否可以在元素级别覆盖核心 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 对象实例。如果我摆弄 $.fn.val 函数，我会更改所有支持 val 函数的对象的行为，这对我来说有点过分。
任何帮助将不胜感激。 谢谢。
【问题讨论】：
标签： jquery function overriding element core
我做了这个 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);
}
};
};
对 Dave 的回答有好处 - 您不必污染 jquery 数据命名空间或担心有人覆盖该键
【讨论】：
arguments 来自哪里？看起来它总是未定义。或者我们可以在第四行添加$.fn[methodName] = function(arguments) { 吗？
arguments 是一个特殊的语言级变量，它保存传递给当前正在运行的函数的参数。在这种情况下，参数只是被传递给重写函数action 或最初定义的处理函数originalVal。
基于 sdleihssirhc 的回答，但修改为仅适用于先前匹配的元素，因为您说“仅在 one
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);
}
};
【讨论】：
这个小 sn-p 允许覆盖 jQuery 方法。
我发现@BT 的答案很糟糕，因为它在每次使用函数时都会创建额外的回调。因此，如果您将其应用于 1000 个元素，则会调用每个 val() 的 1000 个函数！
我的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);
};
};
【讨论】：
每个 jQuery 对象都包含一个 selector 属性，其中包含（duh）用于获取元素的原始选择器（我根本没有真正使用过它，所以我不确定它会发生什么当您通过一系列方法时）。
因此，您可以将val 方法包装在一个检查selector 属性的函数中，然后决定是使用您的函数还是使用原始函数。它看起来像这样：
$.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 实例。
（另外，这本身就非常简单；您需要相应地修改/增强它。）
【讨论】：
$("select.someClass") 等而中断。如果选择器变得更复杂，它将停止运行。你需要一个稳定的正则表达式来捕捉它。
是的，这是一个很好的问题。我永远不会尝试这个东西。
我们走吧：
在我们开始之前，我们应该将默认的 val 函数复制到另一个地方：
jQuery.fn.oldval = jQuery.fn.val;
我会编写一个全局函数来捕获 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);
};
之后，您可以使用以下方法为 Element-Data 设置一个函数：
var element = jQuery(...);
jQuery.data(element.get(0), 'val-function', function(value){
/* Your Function here */
});
我不知道这是否有效。试试吧。这只是来自我的大脑。
【讨论】：