I've been searching SO for an answer, but have not found nothing that is exactly like this. jQuery/JS is not my main skill, so pls have oversight if this seems to be a n00b-question. With that said, this is what I would like to do.
I have a main script from which i make an Ajax-call to populate a div with content. This is my code.
function callComments(thisguid) {
$.ajax({
type: 'POST',
dataType: 'html',
url: 'ajax_user_comment_print.php',
data: {"guid" : thisguid},
success: function (data) {
$('#comments').html(data);
}
});
};
callComments('<?=$guid?>');
$(".comment_form").submit(function(e) {
e.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
success: function(data)
{
callComments('<?=$guid?>');
}
});
});
Then the page is loaded, the DIV #comments is populated with HTML. The main page includes a FORM (.comment_form) that when submitted fires the second event, makes some database insertions, and then redraw the previous DIV with updated content.
This all works fine.
The HTML that is inserted into the DIV includes another FORM (.comment_form) and what I want to do is that when that form is submitted, the code above would catch that event. But it does not.
I'm pretty sure I've managed to do this before, and there is a slight memory that it might have been done with eval(), but all my trys have been in vain.
Any solution that I should do? Many thanks.