Question

我有一个事件处理程序方法，只需单击一个按钮即可执行。我还传递了一些数据，如下所示

$( "button" ).on( "click", {name: "Hello"}, greet );

该方法定义为：

function greet(event) {
    // Use the data as event.data.name
    // Access the DOM element on whose click this method was invoked as $(this)
}

但我也想把这个函数用作普通的js函数。

如何传递数据({name: "Namaskara"})？
如何设置上下文 - 例如说我有另一个按钮<button id="kannada" />，我想使用此按钮作为上下文并发送到greet()函数，以便{{1}函数中使用的实际上是按钮

Answer 1

1）。回答您的第一个问题。

但我也希望将此功能用作普通的js功能。如何传递数据
{name：“Namaskara”}？“：

您需要使用data属性传递一个对象：

greet({data: {name: "Namaskara"}});

2）。关于背景的第二个问题：

var $kannada = $('#kannada'); // another button
greet.call($kannada[0], {data: {name: "Namaskara"}});

在这种情况下，greet将被调用，就像您手动点击#kannada按钮一样，这意味着上下文this将指向button#kannada。当然，在这种情况下，greet中的事件对象将不是真正的鼠标事件，但它将正确设置data属性。

演示：http://jsfiddle.net/ddhzwk43/

Answer 2

$('button').click(function(){
    otherfunction('Namaskara');
});

function otherfunction(name){
    //do something here with the name :)
    alert(name);
}

http://jsfiddle.net/wzbphgyv/

更新了您的ID内容：

http://jsfiddle.net/wzbphgyv/1/

Answer 3

$('button').click(function(){
    second_function('param_data1', 'param_data2');
});

function second_function(getParam1, getParam2){
    alert(getParam1 + getParam2);
}

Fiddle code

Answer 4

不需要第二个函数映射代替使用代理：

function greet(name){
   console.log(name);
}
var proxy = $.proxy(greet, this, "hello"); 

$("#test").on("click", proxy);

Answer 5

另一种方法是使用data-* html5属性来保存要使用的特定数据。你可以这样做：

HTML：

<button data-name="Hello">click</button>
<button id="kannada" data-name="Namaskara">kannada</button>

jQuery的：

function greet() {
    alert($(this).data('name')); // alerts - Hello for button 1
}                                // alerts - kannada for button 2
$(function () {
    $("button").on("click", greet);
});

单击事件函数上的jQuery也可以用作普通函数

5 个答案:

演示：http://jsfiddle.net/ddhzwk43/

HTML：

jQuery的：

Sample Demo