Jquery selecione não funcionar como esperado - jquery, selector

Eu tenho uma tabela que é processada dinamicamente usando jQuery após uma chamada de ajax.

A tabela parece correta e tem um botão em cada linha.

Eu tenho um simples (clique em função) que eu quero acionar quando o botão é clicado. O problema que tenho é que eu não consigo anexar o ouvinte de eventos ao próprio botão.

A linha parece com isso:

<tr>
<td>04/01/2013</td>
<td>LastName, FirstName</td>
<td>Success looks like this. and other stuff</td>
<td>
<button id="serialID1" class="btn btn-small formViewBtn" type="button">View</button>
</td>
</tr>

Se eu usar uma função como esta:

$("#tableConversation tbody").on("click", function(){alert("hi mom")});

Funciona.

Mas, isso não e eu não entendo porque não:

$("#tableConversation tbody button").on("click", function(){alert("hi mom")});

Nem isso:

$("#tableConversation tbody .formViewBtn").on("click", function(){alert("hi mom")});

Idéias?

Respostas:

1 para resposta № 1

Como você está adicionando conteúdo dinamicamente à tabela, um "Evento Delegado" é provavelmente a melhor abordagem aqui.

$("#tableConversation").on("click", "tbody button", function(){alert("hi mom")});

Para mais informações, consulte a seção "Eventos delegados" do jQuery "s on docs.

Editar - Mais informações:

Se você usar o método original, o jQuery encontrará imediatamente todos os itens correspondentes ao seletor e adicionará um manipulador de cliques ao cada deles. Mas qualquer coisa adicionada depois dessa chamada não terá o manipulador. Se você usar a abordagem de eventos delegados, poderá adicionar um único manipulador "mais acima no DOM", e esse manipulador lidará com todos os elementos DOM correspondentes, independentemente de quando é adicionado ao DOM. A razão pela qual isso funciona é que a maioria dos eventos sobe na árvore DOM até que um manipulador instrua o evento a parar de se propagar. on O código verifica se o destino corresponde e aciona o manipulador.

---