Jquery Onclick e referência ao objecto clicado

Question

Eu tenho a seguinte expressão jQuery, Dentro da função Eu preciso de uma referência ao objeto que foi clicado, há uma maneira de fazer isso?

$('#tagList li').click(function() {
  /* contents */
});

Answer 1

Use

$(this)

Answer 2

Você pode usar o valor de retorno

$("#tagList li").bind("click", function(e) {
    alert(e.currentTarget + ' was clicked!');
});

ou se você quiser, você pode simples ponto para o objeto no modo jQuery

$("#tagList li").bind("click", function(e) {
    alert($(this) + ' was clicked!');
});

Se você é novo para jQuery, eu sugiro fortemente que você veja alguns screencasts de Remy afiada na jQuery para Designers , eles são grande para entender um pouco de como jQuery funciona, e melhor ainda, como usar o console.log () , a fim de ver os objetos que você pode usar!

Answer 3

Sim, as referências chave this o elemento DOM que foi clicado. Você pode "envoltório" assim:

$(this)

Isto irá permitir que você tratá-lo como um objeto jQuery.

Answer 4

O este palavra-chave é o que você está procurando. Muitas vezes você vai querer aplicar a função jQuery para este para fazer o seu trabalho. Exemplo:

$('#tagList li').click(function() {
  $(this).css({ color: 'red' });
});

Answer 5

Como adicionar uma nova resposta que irá abranger mais casos de uso, especialmente quando você quiser usar arrow funções.

Também é recomendado que você não adicionar um JS clique para um elemento li. Em vez disso você deve usar um botão ou âncora (algo clicável) aninhada dentro deste elemento.

Uma vez que o elemento que você clicar poderia ser uma criança, você precisa ter certeza de que você direcionar o elemento correto.

No meu exemplo, eu vou estar atribuindo o clique para um botão dentro do li, bem como uma aula sobre isso. A marcação será simplesmente:

<ul id="taglist">
  <li><button class="tag-button">Tag 1</button></li>
  <!-- ... -->
</ul>

Em seguida, a javascript:

$('#tagList li button.tag-button').click((e) => {
  const thisButton = $(e.target).hasClass('tag-button')
    ? $(e.target) : $(e.target).closest('.tag-button');
  // do something with thisButton
});

Isso garante que você está alvejando o elemento que o clique foi registrado em. Se você tem qualquer marcação aninhada dentro de seu botão (como ou), então é possível que o destino do evento a ser o elemento aninhado em vez do elemento que você quis atribuir o clique para.