Question

I have php code on a page which generates a series of buttons, like so: (in a loop)

echo "<input type=\"button\" event='$eventID' id=\"sendsomeone\" value=\"Send a family member\"/>";
echo "<span id='$eventID'></span>";

Then I have jquery which catches those clicks, and also creates a button:

$('input:button').click(function() {
   $(this).next("span").append('You clicked this button!'); 
   $(this).next("span").append('<input type=\"button\" event=' + eventID + ' id=\"submitbutton\" value=\"Send\"/>'); 
    $('#submitbutton').click(function() {
    }
}

My objective is to correctly catch all button clicks on the page. (no matter the order they are clicked in, the PHP generated buttons should all behave in one way, the secondary buttons should all behave a different way)

In the code I have above, it works correctly at first, letting you click buttons and creating the secondary button for each. But once you click one of the secondary buttons, it all starts behaving strangely. After clicking a second button, then /any/ click executes code for #submitbutton.

Do I need to use a class in here somewhere? If so, an example would be great. What will make this work?

Answer 1

You don’t need to append the button an then select it. You can create the input element in a jQuery object and then just bind to that objects click event like so:

$('input:button').click(function() {
    var span = $(this).next("span");
    span.append('You clicked this button!'); 
    $('<input type=\"button\" event=' + eventID + ' value=\"Send\"/>')
    .appendTo( span )
    .click(function() {
        //do stuff here
    });
});