Running a function on a dynamically added class

Question

I have a button that when clicked inserts a form input field and a button (to delete) into the form using JQuery .after(). This works fine.

The button that is inserted has a function .click that should run when it is clicked - it is not working.

<script type="text/javascript">

    $("#addAQuestion").click(function(){

        var begin = "<tr>";
        var question = "<td><input type='text' name='question'/>";
        var deleteButton = "<input type='button' class='deleteQuestion' name='delete' value='Del' /></td>";
        var end = "</tr>";

        $("#questions").after(begin + question + deleteButton + end);

    });

    $(".deleteQuestion").click(function(){   

        alert('test');
        //$(this).parent().empty();

    });

</script>

How come the alert is not being triggered when a user clicks on the .deleteQuestion button?

Thanks!

Answer 1

Because the delete button doesn't exist when you do your event wireup.

Consider looking into the .live() api of jquery to solve this problem, or else put the wiring to the delete button click inside the other click handler (so it wires up after the button is added)

Also, you should really consider looking into dom manipulation apis instead of string concatenation.

Answer 2

You aren't assigning the event to the dom object when you are adding it, change the code as follows:

<script type="text/javascript">

    $("#addAQuestion").click(function(){

        var begin = "<tr>";
        var question = "<td><input type='text' name='question'/>";
        var deleteButton = "<input type='button' class='deleteQuestion' name='delete' value='Del' /></td>";
        var end = "</tr>";

        $("#questions").after(begin + question + deleteButton + end);

        $(".deleteQuestion").click(function(){   

            alert('test');
            //$(this).parent().empty();

        });
    });

</script>

Answer 3

This should work:

<script type="text/javascript">

    $("#addAQuestion").click(function(){

        var begin = "<tr>";
        var question = "<td><input type='text' name='question'/>";
        var deleteButton = "<input type='button' class='deleteQuestion' name='delete' value='Del' /></td>";
        var end = "</tr>";

        $("#questions").after(begin + question + deleteButton + end);

        $(".deleteQuestion").click(function(){
            alert('test');
            //$(this).parent().empty();
        });
    });    
</script>

Answer 4

Order of execution. The code that adds the nodes to the DOM is asynchronous - it happens on click. So, essentially, you're attaching click events to .deleteQuestion nodes before those elements are in the DOM.

There are two ways to fix this.

1) Fix the order of execution so that the click events will be properly attached

<script type="text/javascript">

    $("#addAQuestion").click(function(){

        var begin = "<tr>";
        var question = "<td><input type='text' name='question'/>";
        var deleteButton = "<input type='button' class='deleteQuestion' name='delete' value='Del' /></td>";
        var end = "</tr>";

        $("#questions").after(begin + question + deleteButton + end);

        // Has to be here, right after they're added to the DOM
        $(".deleteQuestion").click(function(){   

            alert('test');
            //$(this).parent().empty();

        });
    });

</script>

2) Or, you can use jQuery's live() function to handle this for you via event delegation

<script type="text/javascript">

    $("#addAQuestion").click(function(){

        var begin = "<tr>";
        var question = "<td><input type='text' name='question'/>";
        var deleteButton = "<input type='button' class='deleteQuestion' name='delete' value='Del' /></td>";
        var end = "</tr>";

        $("#questions").after(begin + question + deleteButton + end);

    });

    $(".deleteQuestion").live( 'click', function(){   

        alert('test');
        //$(this).parent().empty();

    });

</script>