Javascript onClick 事件只发生一次？

Question

我正在尝试实现一个评论系统。现在我有一个关于 JS 和 onClick 函数的问题。首先是代码:

<ul class="comments">
            <li>
                <div class="comment">
                    <div class="img-thumbnail" style="margin-left: -98px;">
                        <img class="avatar" alt="" src="img/avatars/noAvatar.jpg" style="width:50px;height:50px;">
                    </div>
                    <div class="comment-block-new" style="background-color:#fff;">
                        <div class="post-leave-comment" style="border:0px; margin:0px; padding:0px;">
                            <form action="" method="post">
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <textarea maxlength="500" rows="1" class="form-control" name="comment" id="comment" onClick="expandComment(this,this.form);">Post your comment...</textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </li>

以及functions.js

function expandComment(inputC,formC){
    inputC.innerHTML = '';

    var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
    +                                '<div class="form-group">'
    +                                    '<div class="col-md-4">'
    +                                        '<label>Your name</label>'
    +                                        '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
    +                                    '</div>'
    +                                '</div>'
    +                            '</div>'
    +                            '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
    +                                '<div class="col-md-12">'
    +                                    '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
    +                                '</div>'
    +                            '</div>';

    formC.innerHTML = formC.innerHTML + showReplyOptions;
}

现在我希望扩展函数只运行一次。我需要创建 ID 的动态扩展原因和即将推出的回复系统。如何做到这一点？

提前谢谢您。

Answer 1

您是否尝试为其添加标志？

var bExpandFunctionRunned = false;

function expandComment(inputC,formC){
    // it won't run again once the flag is set.
    if(bExpandFunctionRunned == false){
        bExpandFunctionRunned = true;

        inputC.innerHTML = '';

        var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
        +                                '<div class="form-group">'
        +                                    '<div class="col-md-4">'
        +                                        '<label>Your name</label>'
        +                                        '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
        +                                    '</div>'
        +                                '</div>'
        +                            '</div>'
        +                            '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
        +                                '<div class="col-md-12">'
        +                                    '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
        +                                '</div>'
        +                            '</div>';

        formC.innerHTML = formC.innerHTML + showReplyOptions;
    }
}