jQuery 的 .click - 将参数传递给用户函数

Question

我正在尝试使用 jQuery 的 .click 调用带有参数的函数，但我无法让它工作。

这就是我希望它的工作方式：

$('.leadtoscore').click(add_event('shot'));

哪个调用

function add_event(event) {
    blah blah blah }

如果我不使用参数，它会起作用，如下所示：

$('.leadtoscore').click(add_event);
function add_event() {
    blah blah blah }

但我需要能够将参数传递给我的add_event 函数。

我该如何做这个具体的事情？

我知道我可以使用.click(function() { blah }，但是我从多个地方调用了add_event 函数并且想这样做。

Answer 1

为了彻底起见，我遇到了另一个解决方案，它是 jQuery click event handler.987654321@ 1.4.3 版中引入的功能的一部分

它允许您将数据映射传递给事件对象，该对象会自动通过 jQuery 作为第一个参数反馈给事件处理函数。数据映射将作为第一个参数传递给.click() 函数，然后是事件处理函数。

这里有一些代码来说明我的意思：

// say your selector and click handler looks something like this...
$("some selector").click({param1: "Hello", param2: "World"}, cool_function);

// in your function, just grab the event object and go crazy...
function cool_function(event){
    alert(event.data.param1);
    alert(event.data.param2);
}

我知道这个问题已经很晚了，但是以前的答案让我找到了这个解决方案，所以我希望它在某个时候对某人有所帮助！

Answer 2

你需要像这样使用匿名函数：

$('.leadtoscore').click(function() {
  add_event('shot')
});

你可以像例子中那样调用它，只是一个函数名没有参数，像这样：

$('.leadtoscore').click(add_event);

但是add_event 方法不会得到'shot' 作为它的参数，而是click 传递给它的回调，即event 对象本身......所以它不适用在这种情况，但适用于许多其他人。如果您需要传递参数，请使用匿名函数...或者，还有一个 other 选项，使用 .bind() 并传递数据，如下所示：

$('.leadtoscore').bind('click', { param: 'shot' }, add_event);

并在add_event 中访问它，如下所示：

function add_event(event) {
  //event.data.param == "shot", use as needed
}

Answer 3

如果你按照你的方式来称呼它......

$('.leadtoscore').click(add_event('shot'));

...您需要让add_event() 返回一个函数，例如...

function add_event(param) {
    return function() {
                // your code that does something with param
                alert( param );
           };
}

函数被返回并用作.click() 的参数。

Answer 4

我像这样使用 .on() 成功了：

$('.leadtoscore').on('click', {event_type: 'shot'}, add_event);

然后在add_event 函数中，您可以像这样访问“shot”：

event.data.event_type

请参阅.on() documentation 了解更多信息，他们提供以下示例：

function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

Answer 5

是的，这是一个旧帖子。无论如何，有人可能会觉得它很有用。这是向事件处理程序发送参数的另一种方法。

//click handler
function add_event(event, paramA, paramB)
{
    //do something with your parameters
    alert(paramA ? 'paramA:' + paramA : '' + paramB ? '  paramB:' + paramB : '');
}

//bind handler to click event
$('.leadtoscore').click(add_event);
...
//once you've processed some data and know your parameters, trigger a click event.
//In this case, we will send 'myfirst' and 'mysecond' as parameters
$('.leadtoscore').trigger('click', {'myfirst', 'mysecond'});

//or use variables
var a = 'first',
    b = 'second';

$('.leadtoscore').trigger('click', {a, b});
$('.leadtoscore').trigger('click', {a});

Answer 6

      $imgReload.data('self', $self);
            $imgReload.click(function (e) {
                var $p = $(this).data('self');
                $p._reloadTable();
            });

将 javaScript 对象设置为 onclick 元素：

 $imgReload.data('self', $self);

从“this”元素中获取对象：

 var $p = $(this).data('self');

Answer 7

我得到了简单的解决方案：

 <button id="btn1" onclick="sendData(20)">ClickMe</button>

<script>
   var id; // global variable
   function sendData(valueId){
     id = valueId;
   }
   $("#btn1").click(function(){
        alert(id);
     });
</script>

我的意思是将值onclick事件传递给javascript function sendData()，初始化变量并通过jquery事件处理方法获取它。

这是可能的，因为一开始sendData(valueid) 被调用并初始化值。然后在 jquery 事件执行后使用该值。

这是直接的解决方案，详细解决方案请转到 Here。

Answer 8

因为没有人指出（令人惊讶）。您的问题是，$('.leadtoscore').click(add_event); 与 $('.leadtoscore').click(add_event('shot')); 不同。第一个传递一个函数，第二个传递一个函数调用，因此该函数的结果被传递给.click()。那不是你想要的。这是您想要的原生 JavaScript 术语：

$('.leadtoscore').click(add_event.bind(this, 'shot'));

Function.prototype.bind() 将函数传递给.click()，就像在第一个示例中一样，但绑定了this 和可在调用时访问的参数。