jQuery .on（）方法 - 将参数传递给事件处理函数

I have the following script which does not work

我有以下脚本不起作用

<script type="text/javascript" >

   function ADS(e){ alert(e); }

   $(document).ready(function(){
          $(document).on("dblclick","#an_tnam tr", ADS('hello'));
          $(document).on("dblclick","#kv_tnam tr", ADS('world'));
          // ....  
 });

</script>

how can I pass argument to event handler function ADS ?

如何将参数传递给事件处理函数ADS？

6 个解决方案

#1

The .on() function expects a function reference to be passed; what you're doing is calling the function and passing its return value. If you need to pass a parameter you'll need to wrap the call in an anonymous function.

.on（）函数需要传递函数引用;你正在做的是调用函数并传递其返回值。如果需要传递参数，则需要将调用包装在匿名函数中。

$(document).on('dblclick', '#an_tnam tr', function(event) {
    ADS('hello');
});

jQuery always passes its normalized event object as the first argument to the function to be executed.

jQuery总是将其规范化的事件对象作为要执行的函数的第一个参数传递。

#2

You can pass extra data to an event handling function and can be accessed using event.data within the handler.

您可以将额外数据传递给事件处理函数，并可以使用处理程序中的event.data进行访问。

$(document).on('dblclick', '#an_tnam tr', { extra : 'random string' }, function(event)
{
    var data = event.data;

    // Prints 'random string' to the console
    console.log(data.extra);
}

You can also send extra data to any event you like when triggering the event from an external source using the .trigger() method

您还可以使用.trigger（）方法从外部源触发事件时向您喜欢的任何事件发送额外数据

$('#an_tnam tr').trigger('click', [{ extra : 'random string' }]);

The difference with passing data to the trigger method is that it expects the handler to take extra arguments of the length of the array passed in. The above would expect the handler to have one extra argument to contain the object passed in.

将数据传递给触发器方法的不同之处在于，它希望处理程序获取传入的数组长度的额外参数。上面会希望处理程序有一个额外的参数来包含传入的对象。

$('#an_tnam tr').on('click', function(event, obj)
{
   // Prints 'random string' to the console
   console.log(obj.extra);
}

#3

As Anthony Grist pointed out, the .on() method is expecting a function reference at that part; you're evaluating a function which returns nothing (null).

正如Anthony Grist指出的那样，.on（）方法期望在该部分进行函数引用;你正在评估一个什么都不返回的函数（null）。

However, one fun feature of JavaScript is that everything is an object, including functions. With a small modification, you can change ADS() to return an anonymous function object instead:

然而，JavaScript的一个有趣特性是一切都是一个对象，包括函数。通过一个小的修改，您可以更改ADS（）以返回匿名函数对象：

function ADS(e){ 
    return function(){ alert(e); };
}

http://jsfiddle.net/cSbWb/

#4

function ADS(e){ alert(e); }

$(document).ready(function(){
          $(document).on("dblclick","#an_tnam tr", function (e) { ADS('hello') });

 });

will do the trick.

会做的伎俩。

#5

function ADS(e) {
    return function() {
        alert(e);
    };
}

Like that when you're doing

就像你正在做的那样

$(document).on("dblclick","#an_tnam tr", ADS('hello'));

, it is the returned function that is assigned as event handler (and your string argument is passed when you're assigning the handler, not when it's called).

，它是被赋值为事件处理程序的返回函数（并且在分配处理程序时传递字符串参数，而不是在调用它时）。

#6

Actually, there is a very neat simple way to achieve this, with no extra clutter and no anonymous functions, using JS bind():

实际上，有一个非常简洁的方法来实现这一点，没有额外的混乱和没有匿名函数，使用JS bind（）：

$(document).on('dblclick', ADS.bind(null, 'hello'));

First parameter is the value you want "this" to have inside callback function.

第一个参数是您希望“this”具有内部回调函数的值。

MOre info in Mozilla Developer Network: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Mozilla开发者网络中的MOre信息：https：//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

#1