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

Question

考虑以下情况：
我有一个 jQuery 对象，$wrapper = $(this);。这发生在初始化调用中，例如 $('#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() 丢失了。没问题，我会在初始化调用中将它附加到 DOMElement 本身

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

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

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

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

Answer 1

如果 $wrapper 是相同的元素，您应该能够在 .data()

中存储 getValue

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

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

jQuery add method to object, then trigger event on it