I wrote some code to insert a form into the page, whenever a link with class .reply is clicked. However I can’t seem to bind the submit event. It actually works fine the first time the form is submitted, but it won’t work for any other submit attempts.
$(document).ready(function(){
//Inserts comment box when reply button is clicked
$('.reply').click(function(){
var replybox = $('.replybox');
var replyHtml = '<div class="replybox"><form action="sadf" method="post" id="commentform"><textarea rows="6" cols="10" name="comment" id="comment"></textarea><br class="br"/><input type="submit" value="" id="scomment" class=""/></form></div>';
var clickedLink = $(this);
if(replybox.length > 0){
replybox.slideUp('slow', function(){
replybox.remove();
clickedLink.parents('.comment').append(replyHtml);
$('.replybox').slideDown('fast');
});
}
else{
$(this).parents('.comment').append(replyHtml);
$('.replybox').slideDown('fast');
}
$('#commentform').bind('submit', submitComment);
});
function submitComment(){
//do something
}
});
It works fine if I move the $(‘#commentform’).bind statement into each of the if/else branches, but I don’t understand why it doesn’t work the way I have it written above.
Any ideas?
Thanks.