Botão dinâmico jQuery: como ligar a exisitng clique em evento por classe
Eu tenho um evento de clique acionado pelo seletor de classe dentro do escopo pronto do jquery:
$(".testBtn").click(function()
{
alert("This Works");
});
Isso funciona bem para botões estáticos, como isso não funciona para botões dinâmicos que são adicionados ao clicar no botão com o ID "addRowBtn". Eu estou supondo que tem algo a ver com que o botão é criado após o evento ser registrado, mas ainda assim o novo botão tem a classe 'testBtn', então faz sentido que ele funcione. Alguma idéia do que estou fazendo de errado e como fazer com que os botões dinâmicos sejam registrados no evento de clique do seletor de classe?
Aqui está o código inteiro, você pode copiar e colar em um html, clicar no botão "adicionar" e tentar clicar nos botões adicionados. você verá que nada acontece.
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'></script>
<script>
$(function()
{
$(".addRowBtn").click(function()
{
$("#mainTable tr:last").after("<tr><td><button class='testBtn'>NotWorking</button></td></tr>");
});
$(".testBtn").click(function()
{
alert("This Works");
});
});
</script>
</head>
<body>
<table id="mainTable">
<button class="addRowBtn">Add button</button>
<tr><th>Testing</th></tr>
<tr><td><button class='testBtn'>Working</button></td></tr>
</table>
</body>
</html>