why does jquery ajax send multiple times? - php

Question

i have a message board. and you can comment on each message (bit like faceboook).
if you click the "comment" link a textarea slides down and you can write your comment.
but if you click "comment" then click cancel so that the textarea slides back up and them click comment again so that it slides back down again and leave a comment it will post the commment twice. so for every time the comment textarea slides into view and back it duplicates the comment.
$("body").on("click",".new_comment", function(e){ // new comment link
e.preventDefault();
var post = $(this).parents('.message_container').siblings('#post_comment');
clearInterval(refreshBoard); //stop autorefresh
$(post).slideDown(400, function() { //slide textarea down
$(".cancel_comment").on("click", function(e) { //cancel comment
e.preventDefault();
$(post).slideUp(400, function() { //slide textarea back up
$('#comments').load('messages.php'); //reload div
msgRefresh(); //starts autorefresh
});
});
});
//the following posts the comment along with info//
$("body").one("click", '.post_comment_button', function(e){
e.preventDefault();
var anchor = $(this).parents('.update_comment')
.parents('#post_comment').siblings('.comment_list').find('ul:first');
var comment = $(this).parents('.update_comment').children('textarea.post_comment').val();
var user = $(this).parents('.update_comment').children('input.user').val();
var msg_id = $(this).parents('.update_comment').children('input.message_id').val();
if (comment == '') $('#comments').load('messages.php');
else {
$.post('messages.php', {
comment: comment,
message_id: msg_id,
post_comment: 'true' }, function(data) {
//creatse new comment//
$('body').append(data);
var newcomment = "<li><div class='comment_container'>
<div class='date'>less than 1 minute ago</div>
<div class='name'>" + user + " </div>
<div class='info_bar'><div class='edit_comment'>
<a href='#' class='comment_edit'>Edit</a> </div>
<span>|</span><a href='#' class='delete_comment'>Delete</a></div>
<div class='fadeOut_comment'><div class='posted_comment'> " +
nl2br(htmlEntities(comment.trim())) + " </div></div></li>";
$(post).slideUp(400);
$(newcomment).fadeIn(500, function() {
$('#comments').load('messages.php');
}).appendTo(anchor);
});
}
});
});
so my question is why is this happening? and how do i stop it? if you need more info please ask. thankyou

Answer 1

This is happening because you're biding the .cancel_comment click handler every time someone clicks the .new_comment link.
On the first comment it fires one time and binds again, second comment fires two times and binds again, etc. By the 10th comment it will fire 10 times because you attached 10 event handlers.
Then, because you call msgRefresh(); inside this callback, it will append the same messages several times to the DOM.
To only bind it once take the following outside the .new_comment click callback.
$(".cancel_comment").on("click", function(e) { //cancel comment
e.preventDefault();
$(post).slideUp(400, function()
{ //slide textarea back up
$('#comments').load('messages.php'); //reload div
msgRefresh(); //starts autorefresh
});
});
And then bind it like this:
$("body").on("click", ".cancel_comment", function(e)
{
//cancel comment
});
I can see you're also biding at least one more event inside the .new_comment click callback. You should avoid doing this, do not bind anything inside a callback unless you really need to and you're 100% sure it won't be attached more than one time.
EDIT: The complete code might look something like this:
$("body").on("click", ".cancel_comment", function(e) { //cancel comment
e.preventDefault();
$(post).slideUp(400, function() { //slide textarea back up
$('#comments').load('messages.php'); //reload div
msgRefresh(); //starts autorefresh
});
});
$("body").on("click",".new_comment", function(e){ // new comment link
e.preventDefault();
var post = $(this).parents('.message_container').siblings('#post_comment');
clearInterval(refreshBoard); //stop autorefresh
$(post).slideDown(400, function() { //slide textarea down
});
//the following posts the comment along with info//
$("body").one("click", '.post_comment_button', function(e){
e.preventDefault();
var anchor = $(this).parents('.update_comment')
.parents('#post_comment').siblings('.comment_list').find('ul:first');
var comment = $(this).parents('.update_comment').children('textarea.post_comment').val();
var user = $(this).parents('.update_comment').children('input.user').val();
var msg_id = $(this).parents('.update_comment').children('input.message_id').val();
if (comment == '') $('#comments').load('messages.php');
else {
$.post('messages.php', {
comment: comment,
message_id: msg_id,
post_comment: 'true' }, function(data) {
//creatse new comment//
$('body').append(data);
var newcomment = "<li><div class='comment_container'>
<div class='date'>less than 1 minute ago</div>
<div class='name'>" + user + " </div>
<div class='info_bar'><div class='edit_comment'>
<a href='#' class='comment_edit'>Edit</a> </div>
<span>|</span><a href='#' class='delete_comment'>Delete</a></div>
<div class='fadeOut_comment'><div class='posted_comment'> " +
nl2br(htmlEntities(comment.trim())) + " </div></div></li>";
$(post).slideUp(400);
$(newcomment).fadeIn(500, function() {
$('#comments').load('messages.php');
}).appendTo(anchor);
});
}
});
});