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; 
} 

Теперь я хочу, функция расширения только один раз запустить. Мне нужно создать динамически расширяющуюся причину идентификаторов и предстоящую систему ответов. Как это сделать?

Заранее спасибо.

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; 
    } 
} 

Answer 2

Лучший способ присвоить flag значение в элементе DataSet и когда вызов события, проверьте flag значение функции, если уже называют возвращение из верхней части функции см ниже код

function expandComment(inputC,formC){ 

    /***return event code****/ 
    if(inputC.dataset.offclickevent === true) 
     return; 
    else 
     inputC.dataset.offclickevent = 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; 
}