JQuery Dynamic Button: Wie bindet man ein bestehendes Click Event nach Klasse?

Question

Dec 11, 2012, 11:57 AM

JQuery Dynamic Button: Wie bindet man ein bestehendes Click Event nach Klasse?

Ich habe ein Klickereignis, das von der Klassenauswahl im Bereich jquery ready ausgelöst wird:

    $(".testBtn").click(function()
    {
        alert("This Works");      
    });

Dies funktioniert problemlos für statische Schaltflächen, jedoch nicht für dynamische Schaltflächen, die beim Klicken auf die Schaltfläche mit der ID "addRowBtn" hinzugefügt werden. Ich vermute, dass es etwas damit zu tun hat, dass die Schaltfläche erstellt wird, nachdem das Ereignis registriert wurde, aber die neue Schaltfläche immer noch die Klasse 'testBtn' hat, so dass es sinnvoll ist, dass sie funktionieren sollte. Hast du eine Idee, was ich falsch mache und wie die dynamischen Schaltflächen für das Klassenauswahl-Klickereignis registriert werden?

Hier ist der gesamte Code, den Sie kopieren und in einen HTML-Code einfügen können. Klicken Sie auf die Schaltfläche "Hinzufügen" und versuchen Sie, auf die hinzugefügten Schaltflächen zu klicken. Du wirst sehen, dass nichts passiert.

<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>