Question

Hoping someone can point me in the right direction.

I’ve got this code:

//nextButton processing
    $('.nextButton').on("click", function(){
    //$('.nextButton').click(function(){

         var querystring = $("#formStep").serialize() + "&step=" + step + "&session=" + session;
        // Ajax Call
        $.ajax({
                type: "POST",
                data: querystring,
                url: "includes/processnext.php",
                dataType: 'json',
                success: function(msg){
                    $('.result').append(msg.answerRow);

                }
            });

  // End Ajax Call
    });

Now this works for the first .nextbutton on there, but the ajax result replaces it with a next next button.

To fix this i tried using the Jquery .on() (old code commented out) but that doesn’t seem to have solved it either.

Any suggestions?

Thanks.

Answer 1

Attach the click event handler to a container element, like this:

$('#container').on("click", ".nextButton", function(){

The container element will then “catch” the click event as it bubbles up from the .nextButton.