Stop button action after press it

Question

I have a JS function that loads the comments of a certain answer. The idea is to call an API function and to return the comments. The problem is that everytime I press the button it loads the comments, the same exact comments. I want something that after you press comment, you cannot load more comments. I though stopPropagation would do the trick but nothing happened.

Is it possible to when I press the Comment button after I call it, it closes my #showarea

<div class="post-button clearfix">
                <div class="post-button clearfix">
                    <button class="btn icon-chat show-textarea" title="Add a comment on this answer" type="button" data-answer="{$answer['publicationid']}">Comment</button>
                    <div class="textarea">
                        {include file="comment_form.tpl"}
                    </div>
                </div>
            </div>

comment_form.tpl

$('.comment-form').hide();
var commentsFetched = false;

$("body").on("click", ".show-textarea", function(){
    if (commentsFetched) { // check the flag
        return;
    }
    $.getJSON("/controller/api/comments/comment.php", {
        answerid : answerid
    }, function (data) {
        commentsFetched = true;
        $.each(data, function(i, comment) {
            console.log(comment);
            $('.comment-form').append('<article class="tweet-data">' +
                '<div class="comment-items">' +
                '<div class="qa-c-list-item  hentry comment" id="c3574">' +
                '<div class="asker-avatar">' +
                '<a>' +
                '<img width="40" height="40" src="' +
                comment.user_photo +
                '"></a>' +
                '</div>' +
                '<div class="qa-c-wrap">' +
                '<div class="post-button">' +
                '<button name="" onclick="" class="btn icon-flag" title="Flag this comment as spam or inappropriate" type="submit">flag</button>' +
                '<button name="" class="btn icon-answers" title="Reply to this comment" type="submit">reply</button>' +
                '</div>' +
                '<span class="qa-c-item-meta">' +
                'commented' +
                ' 1 day' +
                ' ago' +
                ' by ' +
                '<a style="display: inline" href="" class="qa-user-link url nickname">' +
                comment.username +
                '</a> ' +
                '<span class="qa-c-item-who-points"> ' +
                '<span class="qa-c-item-who-points-pad">(</span><span class="qa-c-item-who-points-data">140</span><span class="qa-c-item-who-points-pad"> points)</span> ' +
                '</span> ' +
                '</span> ' +
                '</span> ' +
                '<div class="qa-c-item-content" style="color: #2d2727; font-size: 13px"> ' +
                '<a name="3574"></a><div class="entry-content">' +
                comment.body +
                '</div> ' +
                '</div> ' +
                '</div> <!-- END qa-c-item --> ' +
                '</div> ' +
                '</div>');
        });
    });

    $('.comment-form').show();
});

$("body").on("click", ".textarea-ok, .textarea-cancel", function(){
    commentsFetched = false;
    $('.comment-form').hide();
});

Answer 1

set a flag to know if you already fetched the comments.

var commentsFetched = false;
$("#showarea").click(function() {
    if (commentsFetched) { // check the flag
       return;
    }

    $.getJSON("/controller/api/comments/comment.php", {
        answerid : answerid
    }, function (data) {
        commentsFetched = true; // set the flag
        $.each(data, function(i, comment) {
    ...

You should probably disable the button to give your users a visual indication no more comments can be loaded