按下后停止按钮动作

Question

我有一个JS函数，可加载某个答案的注释。 这个想法是调用一个API函数并返回注释。 问题在于，每当我按下按钮时，它都会加载评论，这些评论完全相同。 我希望您在按评论后无法加载更多评论。 我虽然可以使用stopPropagation来解决问题，但是什么也没发生。

调用后按“评论”按钮时是否可以关闭我的#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

设置一个标志来知道您是否已获取评论。

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) {
    ...

您可能应该禁用该按钮，以便为用户提供直观的指示，表明无法加载更多评论