jQuery binding a form submit via a class name does not work

Question

I have a jQuery AJAX call that creates and displays a form like this in PHP:

echo '<form class="add_suggested_solution_comment" name="suggest_solution_comment_form" method="post">';
echo '<p><textarea name="suggested_solution_comment" cols=65 rows=6 ></textarea></p>';
echo '<input type="hidden" name="problem_id" value="'.$problem_id.'" />';                                                   echo '<input type="hidden" name="suggestion_id" value="'.$suggested_solution_id.'" />';   
echo '<p><input type="submit" class="button" value="Add Comment"></input></p>';             
echo '</form>';

Then when the user clicks the form, I try to catch the click in jQuery like this by using the class attribute of the form. For a specific reason, I can't use the id attribute of the form.

Here is how that jQuery looks like:

$('.add_suggested_solution_comment').bind('submit',function()

But for some reason when the user submits the form, the jQuery never gets triggered. Any idea why?

Thanks!!

Answer 1

If you're creating the form dynamically via AJAX, you need to bind the submit handler using jQuery's live() method:

$('.add_suggested_solution_comment').live('submit', function(){
    alert('form submitted');
    // other code
});

Answer 2

Are you firing this on load? try

$(document).ready(function(){
    $('.add_suggested_solution_comment').bind('submit',function()
});