Question

After the form is submitted (using ajax), I’m trying to fade it out and give the user a message, and link giving the user the option to make the form appear again.

After the form is submitted….

$(form).animate({ opacity: 0.0}, 500, function(){
                $(this).fadeOut(400);

                $(".success-msg")
               .prepend('<h1> Success! You submitted a quote! </h1> <a class="quote-link" href="/quote-' + id + '"> localhost.com/quote-' + id + ' </a> <a class="goback" href="#"> Or click here to submit another quote </a>')
                    .fadeIn(500);

And if they want to go back, they click on .goback, which would hide the .success-msg box.

$('.goback').click(function(){
                $(this).parent().fadeOut(500).hide().empty();
                $('#submit-quote').animate({opacity: 1}, 500).fadeIn(500);            
            });

Problem is, if they click..

<a class="goback" href="#"> Or click here to submit another quote </a>

after being appended to the dom, the click event doesn’t work. But if I put it in the .success-msg box by default, and only append the other HTML. It’ll work. But then if they go back to the form and submit another quote, then .empty() empties the element out and so .goback doesn’t exist anymore.

How can I make this work?

Answer 1

$(".success-msg").on('click','.goback',function(){
    $(this).parent().fadeOut(500).hide().empty();
    $('#submit-quote').animate({opacity: 1}, 500).fadeIn(500);            
});

or if you’re not using jQuery 1.7 or later…

$(".success-msg").delegate('.goback','click',function(){
    $(this).parent().fadeOut(500).hide().empty();
    $('#submit-quote').animate({opacity: 1}, 500).fadeIn(500);            
});