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' }]);

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

$('#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/