Running jquery function after one function is executed

Question

I am adding some comments with AJAX and get return formatted HTML and adding it to HTML with DOM manipulation,

jQuery.ajax({
    url: baseURL + "index.php/user/news/add_comment",
    data: $("#comment_fm").serialize(),
    type: "POST",
    success: function(data) {

        var objData = jQuery.parseJSON(data);

        if (objData.cival == 1) //Success..
        {
            $("#comment").val('');
            $("#comment_box").replaceWith(objData.comment);
            $("#commentcounts").replaceWith(objData.commentcounts);
        }

    } // Success End
}); //AJAX End

With above code i can see my comments are added, Now in same return formatted HTML, there is delete button which have JS function associated,

Below is delete JS,

function deletecomment(commentid) {
    jQuery.ajax({
        url: baseURL + "index.php/user/news/deletecomment",
        data: {
            comment_id: commentid
        },
        type: "POST",
        success: function(data) {
            var objData = jQuery.parseJSON(data);

            if (objData.cival == 1) {
                $("#commentcounts").replaceWith(objData.commentcounts);
                $("#commentbox" + commentid).remove();
            }
        }
    });
}

Below is my delete button which fire to function deletecomment()

<a href="javascript:deletecomment(<?php echo $comment['comment_id'];?>);"><i class="fa fa-trash text-info"></i></a>

But my problem is that i can not delete this comment just after adding function is run, If i refresh page, then delete function works a needed,

So question is, how to make multiple function work without reloading page?

Thanks in advance,

Answer 1

I would suggest you to try as below:

<a class="deleteComment" data-id="<?php echo $comment['comment_id'];?>" href="#"><i class="fa fa-trash text-info"></i></a>

Your JS would be:

$(document).on('click','.deleteComment',function(){
    jQuery.ajax({
          url: baseURL + "index.php/user/news/deletecomment",
          data: {
                 comment_id: $(this).data('id');
          },
          type: "POST",
          success: function(data) {
                var objData = jQuery.parseJSON(data);
                if (objData.cival == 1) {
                     $("#commentcounts").replaceWith(objData.commentcounts);
                     $("#commentbox" + commentid).remove();
                }
          }
    });
});