将数据传递给jQuery事件处理程序

Question

方案

在GUI中，用户在文本输入中插入一些文本，然后单击按钮：插入的文本将显示在div中。

我找到了一个简单的解决方案（demo here），即在访问输入元素对象的处理程序中设置输出文本。太糟糕了。 相反，我会将输入文本（而不是元素）传递给处理程序。

问题

如何将参数（在本例中为输入消息文本）传递给处理函数？

Answer 1

我修改了your jsFiddle中的代码。在jQuery中，您可以将数据作为参数传递，并使用event.data jQuery reference访问它。

Answer 2

/*
 * I would not to referer UI elements here
 * Rather I would pass the $('#txtMessage').val() to the handler
 */

这是不可能的。

如果您想使用该输入元素的当前值，那么必须访问UI元素本身。

如果您的目的是将事件处理程序与要知道要访问哪个特定元素的事件分离，那么可以通过使用事件数据将其传递给处理程序来轻松完成，例如：

$(sel).on('click', {
   source: document.getElementById('txtMessage')
}, handler);

和回调：

function handler(event) {
    var txt = event.data.source.value;
    ...
}

请注意，jQuery事件数据应该是key: value对的映射，如上所示。直接传递jQuery对象，如接受的答案所示，很容易破解。

Answer 3

检查一下 - http://api.jquery.com/event.data/

你的JS会是这样的（未经测试）：

$('#myButton').on("click", {val: $('#txtMessage').val()}, function(event){
    $('#divOutput').html(event.data.val);
});​

Answer 4

这将为您提供input元素的当前值。它基本上仍然访问输入元素，但如果你想获取当前值

，则无法避免这种情况

$('#myButton').on("click", {val: function (){ return $('#txtMessage').val()}}, function(event){
    $('#divOutput').html(event.data.val());
});​