jQuery's .click - pasar parámetros a la función del usuario

283

Estoy tratando de llamar a una función con parámetros usando .click de jQuery, pero no puedo hacer que funcione.

Así es como quiero que funcione:

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

que llama

function add_event(event) {
    blah blah blah }

Funciona si no uso parámetros, como este:

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

Pero necesito poder pasar un parámetro a mi add_eventfunción.

¿Cómo puedo hacer esto específico?

Sé que puedo usar .click(function() { blah }, pero llamo a la add_eventfunción desde varios lugares y quiero hacerlo de esta manera.

Paul Hoffer
fuente
Esto se adoptó de la patricksrespuesta, que creo que es una gran solución: jsfiddle.net/naRRk/1
jAndy

Respuestas:

514

Para mayor detalle, encontré otra solución que era parte de la funcionalidad presentada en la versión 1.4.3 del controlador de eventos jQuery click.

Le permite pasar un mapa de datos al objeto de evento que jQuery retroalimenta automáticamente a la función de controlador de eventos como primer parámetro. El mapa de datos se entregaría a la .click()función como primer parámetro, seguido de la función de controlador de eventos.

Aquí hay un código para ilustrar lo que quiero decir:

// 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);
}

Sé que es tarde en el juego para esta pregunta, pero las respuestas anteriores me llevaron a esta solución, ¡así que espero que ayude a alguien alguna vez!

Chris Kempen
fuente
11
Esto es exactamente lo que quería (en aquel entonces). No he trabajado en este proyecto desde entonces, pero creo que estaba usando 1.4.0. Esta es definitivamente la mejor manera disponible.
Paul Hoffer
1
Estoy creando dinámicamente el objeto en el lado del servidor y enlazando el evento click con: r.OnClientClick = "imageClicked ({param1: '" + obj.Command + "'}); return false"; Luego, en el lado del cliente, tengo: function imageClicked (event) {if (event.param1 == "GOTO PREVIOUS") {... Si uso event.data.param1 dice que no está definido. Ahora que lo he escrito aquí, puedo ver la diferencia, ¡oh!
Familia
1
@Familia - Jajaja no hay problema, es agradable ayudar, incluso a través de comentarios;)
Chris Kempen
55
@totymedli - Creo que siempre puedes llamarlo en otro lugar, pasando un objeto de la misma estructura var param_obj = {data : {param1: "Hello", param2: "World"}}; cool_function(param_obj);:?
Chris Kempen
1
Esto es mucho mejor que usar atributos de datos HTML5, ¡gracias! (¡Y resuelve JSHint quejándose de usar 'esto' en la devolución de llamada también!)
Matthew Herbst
77

Debe usar una función anónima como esta:

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

Puede llamarlo como lo hizo en el ejemplo, solo un nombre de función sin parámetros, como este:

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

Pero el add_eventmétodo no se obtendrá 'shot'como parámetro, sino lo que sea que clickpase a su devolución de llamada, que es el eventobjeto en sí ... por lo que no es aplicable en este caso , pero funciona para muchos otros. Si necesita pasar parámetros, use una función anónima ... o, hay otra opción, usar .bind()y pasar datos, como esta:

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

Y accede a él de add_eventesta manera:

function add_event(event) {
  //event.data.param == "shot", use as needed
}
Nick Craver
fuente
Cuando dices solo, ¿eso significa solo? En segundo lugar, ¿eso significa que podría usar $ (this) dentro de mi función add_event como lo haría normalmente dentro de la función anónima?
Paul Hoffer
2
@phoffer - Sí, "solo" significa que no hay parámetros, solo el nombre de la función, es una referencia a la función, no el resultado de ejecutar la función que desea asignar al clickcontrolador. En el método anónimo y los .bind()ejemplos anteriores que puede usar this, se referirá al .loadtoscoreque hizo clic (como era de esperar). En el último ejemplo, dentro de add_event(event)lo mismo es cierto, use thiso $(this)y será lo que desee.
Nick Craver
1
@phoffer: Tendrías que pasar el elemento explícitamente para poder usarlo, por ejemplo: function(){ add_event('shot', $(this));}y function add_event(event, element){...}. elementsería un elemento jQuery aquí ( bind()aunque funciona como Nick mencionó).
Felix Kling
@Felix - También puede usar $(this)dentro de la función, por ejemplo: jsfiddle.net/tSu5t
Nick Craver
35

Si lo llamas como lo tenías ...

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

... necesitaría add_event()devolver una función, como ...

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

La función se devuelve y se usa como argumento para .click().

usuario113716
fuente
@jAndy: gracias por publicar el ejemplo, incluido el eventparámetro. Debería haberlo incluido. : o)
user113716
27

Tuve éxito usando .on () así:

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

Luego, dentro de la add_eventfunción, obtienes acceso a 'shot' de esta manera:

event.data.event_type

Consulte la documentación de .on () para obtener más información, donde proporcionan el siguiente ejemplo:

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

Sí, esta es una publicación anterior. De todos modos, alguien puede encontrarlo útil. Aquí hay otra forma de enviar parámetros a los controladores de eventos.

//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});
Kevin
fuente
6
      $imgReload.data('self', $self);
            $imgReload.click(function (e) {
                var $p = $(this).data('self');
                $p._reloadTable();
            });

Establezca el objeto javaScript en el elemento onclick:

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

obtener Objeto de "este" elemento:

 var $p = $(this).data('self');
Vladimir Novick
fuente
¡Increíble! Lamentablemente, ¡esto es lo único que funciona cuando trato de usar variables jquery! No tengo idea de por qué. : |
cregox
3

Me sale la solución simple:

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

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

Mi media es que pase el onclickevento de valor al javascript function sendData(), inicialice a la variable y tome el método del controlador de eventos jquery.

Esto es posible ya que al principio sendData(valueid)se llama e inicializa el valor. Luego, después del evento jquery, se ejecutan y usan ese valor.

Esta es la solución directa y para la solución detallada, vaya aquí .

susan097
fuente
No veo una manera de pasar parámetros dinámicos aquí, solo valores codificados.
user1451111
de esta manera solo pasa el valueId y pierde el elemento y los objetos de evento.
Zoltán Süle