jQuery向对象添加方法，然后在其上触发事件

Posted 2023-05-09

【中文标题】jQuery向对象添加方法，然后在其上触发事件

【英文标题】：jQuery add method to object, then trigger event on it

【发布时间】：2016-07-09 22:23:11

【问题描述】：

考虑以下情况： 我有一个 jQuery 对象，$wrapper = $(this);。这发生在 init 调用中，例如 $('#unique-wrapper-id').initWrapper()'。正如您已经可以想象的那样，initWrapper() 是jQuery.fn 中的一个函数。

现在，仍然在initWrapper() 调用中，我像这样向$wrapper 添加一个函数

$wrapper.getValue = function() /* typical wrapper function */

然后，在单击包装器内的元素时执行的回调中，我调用$wrapper.trigger('change')。 在另一端，我收听常规的 jQuery 更改事件，这就是它不再起作用的地方。

$('#unique-wrapper-id').change(function() 
    var $wrapper = $(this);
    $wrapper.getValue(); // $wrapper.getValue() is not a function
);

好的，所以在 jQuery 更改事件过程中的某个地方 getValue() 丢失了。没问题，我将在 init 调用中将其附加到 DOMElement 本身

$wrapper[0].getValue = function /* typical wrapper function */

这按预期工作，我可以在侦听端的 jQuery 对象后面的 DOMElement 上执行getValue() 方法。

但是，有两件事让我感到烦恼：

为什么在更改事件过程中jQuery对象上的getValue()会丢失？ 为什么 jQuery 构造函数 (var $wrapper = $(this);) 不将 DOMElement 的 getValue() 函数复制到 jQuery 对象中？

【问题讨论】：

每次调用$(element) 时，它都会创建一个包装DOM 元素的new jQuery 对象。因此，您添加到原始 jQuery 对象的属性将丢失。

@Barmar 好点。如果$wrapper : $('#unique-wrapper-id') 在.change() 事件之前定义，应该能够在处理程序中使用$wrapper 而无需再次调用jQuery()。也可以调整为事件委托$(document).on("change", '#unique-wrapper-id') 或$wrapper.change(handler) 然后$(this).data().getValue() 内部handler

是的，你可以这样做。但它不能扩展到多个元素。

@Barmar weeell...这有点道理：/应该想到这一点。

@guest271314 它在更改事件之前定义，但在不同的函数上下文中。您能否详细说明事件委托的另一种方法？

【参考方案1】：

如果$wrapper 是同一个元素，您应该能够将getValue 存储在.data() 中

var getValue = function()  /* typical wrapper function */;
$wrapper.data("getValue", getValue);

---

$("#unique-wrapper-id").change(function() 
    var $wrapper = $(this);
    $wrapper.data().getValue();
);

【讨论】：

谢谢，我明天会尝试，但这对我来说就像将函数添加到 DomElement 的解决方法一样直观。但是很好，完全忘记了数据。