.click do jQuery - passa parâmetros para a função do usuário

283

Estou tentando chamar uma função com parâmetros usando o .click do jQuery, mas não consigo fazê-lo funcionar.

É assim que eu quero que funcione:

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

que chama

function add_event(event) {
    blah blah blah }

Funciona se eu não usar parâmetros, como este:

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

Mas preciso passar um parâmetro para minha add_eventfunção.

Como posso fazer essa coisa específica?

Eu sei que posso usar .click(function() { blah }, mas chamo a add_eventfunção de vários lugares e quero fazê-lo dessa maneira.

Paul Hoffer
fonte
este é adotado de patricksresposta, que eu acho que é uma grande solução: jsfiddle.net/naRRk/1
Jandy

Respostas:

514

Para mais detalhes, deparei-me com outra solução que fazia parte da funcionalidade introduzida na versão 1.4.3 do manipulador de eventos do jQuery click.

Ele permite que você transmita um mapa de dados para o objeto de evento que é automaticamente retornado à função de manipulador de eventos pelo jQuery como o primeiro parâmetro. O mapa de dados seria entregue à .click()função como o primeiro parâmetro, seguido pela função do manipulador de eventos.

Aqui está um código para ilustrar o que quero dizer:

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

Eu sei que é tarde no jogo para esta pergunta, mas as respostas anteriores me levaram a essa solução, então espero que ajude alguém algum dia!

Chris Kempen
fonte
11
Era exatamente isso que eu queria (naquela época). Não trabalho neste projeto desde então, mas acho que estava usando o 1.4.0. Esta é definitivamente a melhor maneira disponível.
Paul Hoffer
1
Estou criando dinamicamente o objeto no lado do servidor e vinculando o evento click com: r.OnClientClick = "imageClicked ({param1: '" + obj.Command + "'}); return false"; Então, no lado do cliente, tenho: function imageClicked (event) {if (event.param1 == "GOTO PREVIOUS") {... Se eu usar event.data.param1, ele indica que está indefinido. Agora que eu digitei aqui, posso ver a diferença, oh!
Família
1
@Family - Haaha nenhum problema, é bom ajuda, mesmo através de comentários;)
Chris Kempen
5
@totymedli - Eu acho que você sempre pode chamá-lo em outro lugar, passando um objeto da mesma estrutura var param_obj = {data : {param1: "Hello", param2: "World"}}; cool_function(param_obj);:?
precisa
1
Isso é muito melhor do que usar atributos de dados HTML5, obrigado! (E também soluciona a reclamação do JSHint sobre o uso de 'this' no retorno de chamada!) #
558 Matthew Herbst
77

Você precisa usar uma função anônima como esta:

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

Você pode chamá-lo como no exemplo, apenas um nome de função sem parâmetros, como este:

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

Mas o add_eventmétodo não obtém 'shot'o parâmetro, mas o que clickpassa para o retorno de chamada, que é o eventpróprio objeto ... portanto, não é aplicável neste caso , mas funciona para muitos outros. Se você precisar passar parâmetros, use uma função anônima ... ou, há outra opção, use .bind()e passe dados, como este:

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

E acesse-o add_eventassim:

function add_event(event) {
  //event.data.param == "shot", use as needed
}
Nick Craver
fonte
Quando você diz apenas, isso significa apenas? Em segundo lugar, isso significa que eu seria capaz de usar $ (this) dentro da minha função add_event como faria normalmente na função anônima?
Paul Hoffer
2
@phoffer - Sim, "just" significa sem parâmetros, apenas o nome da função, é uma referência à função, não o resultado da execução da função que você deseja atribuir ao clickmanipulador. No método anônimo e nos .bind()exemplos acima, você pode usar this, ele se refere ao que .loadtoscorevocê clicou (como seria de esperar). No último exemplo, dentro add_event(event)do mesmo é verdade, use thisor $(this)e será o que você deseja.
Nick Craver
1
@phoffer: Você precisaria passar o elemento explicitamente para usá-lo, por exemplo: function(){ add_event('shot', $(this));}e function add_event(event, element){...}. elementseria um elemento jQuery aqui (ele funciona com o bind()que Nick mencionou).
Felix Kling
@Felix - Ele também pode usar $(this)dentro da função, por exemplo: jsfiddle.net/tSu5t
Nick Craver
35

Se você chamá-lo da maneira que você tinha ...

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

... você precisaria add_event()retornar uma função, como ...

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

A função é retornada e usada como argumento para .click().

user113716
fonte
@jAndy - Obrigado por postar o exemplo, incluindo o eventparâmetro. Eu deveria ter incluído. : o)
user113716
27

Eu tive sucesso usando .on () assim:

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

Então, dentro da add_eventfunção, você obtém acesso a 'shot' assim:

event.data.event_type

Consulte a documentação .on () para obter mais informações, onde eles fornecem o seguinte exemplo:

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

Sim, este é um post antigo. Independentemente disso, alguém pode achar útil. Aqui está outra maneira de enviar parâmetros para manipuladores 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
fonte
6
      $imgReload.data('self', $self);
            $imgReload.click(function (e) {
                var $p = $(this).data('self');
                $p._reloadTable();
            });

Defina o objeto javaScript para o elemento onclick:

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

obtenha Objeto do elemento "this":

 var $p = $(this).data('self');
Vladimir Novick
fonte
Impressionante! Infelizmente, essa é a única coisa que funciona quando tento usar variáveis ​​jquery! não faço ideia do porquê. : |
Cregox
3

Eu recebo a solução simples:

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

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

Minha média é que passa o onclickevento de valor para javascript function sendData(), inicialize para a variável e o aceite pelo método manipulador de eventos jquery.

Isso é possível, pois, inicialmente, sendData(valueid)é chamado e inicializa o valor. Depois que o evento jquery é executado, use esse valor.

Esta é a solução direta e a solução Para detalhes, clique aqui .

susan097
fonte
Não vejo uma maneira de passar parâmetros dinâmicos aqui, apenas valores codificados.
user1451111
dessa forma, você passa apenas o valueId e perde o elemento e os objetos de evento.
Zoltán Süle