jQuery.on()方法-将参数传递给事件处理程序函数

Question

我有下面的脚本，它不适用于

<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>

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

Answer 1

您可以将额外的数据传递给事件处理函数，并且可以在处理程序中使用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);
}

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

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

将数据传递给.trigger()方法的区别在于，.on()希望处理程序采用传入数组长度的额外参数。上述方法希望处理程序(只有(一个额外参数来包含传入的对象。

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

Answer 2

.on()函数期望传递函数引用；您要做的是调用函数并传递其返回值。如果需要传递一个参数，则需要将调用封装在一个匿名函数中。

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

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

Answer 3

实际上，有一种非常简单的方法可以实现这一点，没有额外的混乱和匿名函数，使用JS bind((：

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

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

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

Answer 4

正如Anthony Grist所指出的，.on()方法期望在该部分有一个函数引用；您正在评估一个什么都不返回的函数(null(。

然而，JavaScript的一个有趣特性是，一切都是一个对象，包括函数。只需少量修改，就可以更改ADS()以返回匿名函数对象：

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

http://jsfiddle.net/cSbWb/

Answer 5

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

会成功的。

Answer 6

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

就像你在做时那样

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

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