0

Tenho uma página que é carregada pela função load do jQuery conforme exemplo abaixo:

<div id="result"></div>
<script>
  $('#result').load('listar.php');
</script>

Nessa página listar.php tenho uma listagem de dados vinda do banco de dados da seguinte forma:

<tr>
  <td><?php echo $linha->nome; ?></td>
  <td>
    <button class="ident" value="<?php echo $linha->id; ?>">Mostrar ID</button>
  </td>
</tr>

O problema é que eu não consigo selecionar essa classe ident do <button> pelo jQuery para pegar o id.

Eu queria pelo menos fazer isso:

$('.ident').click(function() {
  alert($(this).val());
});

Como resolver esse problema? O que estou fazendo errado?

2 Respostas 2

1

Antes de tudo: não pesquisarei fontes para embasar o que direi.

Primeiramente:

Eu queria pelo menos fazer isso:

$('.ident').click(function() {
  alert($(this).val());
});

Isso resolveria:

$('body').on("click", ".ident", function() {
  alert($(this).val());
});

Como resolver esse problema?

O "seletor base" para o evento, já deve estar carregado na tela no momento em que você adiciona o listener, portanto, basta fazer um bind de evento a um elemento que já esteja na tela e utilizar dos parâmetros da função para fazer uma sub-seleção. (melhor explicado a seguir)

O que estou fazendo errado?

Você está adicionando um listener a um elemento que ainda não está presente no DOM no momento da execução.

Explicações:

Quando você adiciona um evento via JavaScript, você está atribuindo uma ação a um determinado elemento. Caso um novo elemento, mesmo que com o mesmo seletor, seja inserido no DOM após a execução desse código, ele não estará escutando esse evento.

No caso, você adicionou um evento a classe .ident, porém, só os elementos com a classe ident que já estivessem no DOM na hora da execução do código estariam bindados a ele.

Por quê utilizar $('body').on('click', '.ident', function(){}); resolve?

Neste caso, o evento de click está sendo adicionado ao elemento body, que já está no DOM no momento de execução, o que o jQuery está fazendo por trás neste caso, é basicamente: "após o clique dentro do elemento body, verifica se foi no elemento que tem uma classe ident". Desta maneira, o evento está vinculado ao body, e não ao elemento com a classe ident, o jQuery apenas confirma que o elemento clicado possui a classe desejada, ele não mantém nenhum evento bindado a classe ou outro elemento (além do body) em específico.

1
  • 1
    Sua resposta está muito boa, obrigado. 6/12/2017 às 1:09
1

Use o evento .on():

$("body").on("click",".ident",function(){
    alert($(this).val());
});
1
  • O primeiro código não funciona. Edite sua resposta e coloque apenas o segundo que funciona. Ele tem a função do .delegate()que foi descontinuado. Quando um elemento é adicionado dinamicamente na página, o segundo código funciona.
    – Meu ovo
    9/09/2017 às 3:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .