Как добавить события для динамически добавленного одного элемента, который разделяет имена классов в JQuery?

Question

В моем случае использования я повторяю список объектов и отображаю их в html с тем же набором имен классов для каждого объекта. Если я нажму кнопку для элемента, событие должно быть запущено для этого объекта не для всех других элементов, которые имеют одно и то же имя класса.

Но следующие триггеры кода для каждого элемента, который разделяет имя класса.

HTML

<div class="comment-list-new" style= "max-height: 660px !important;overflow-y: scroll;"> 
    <h5>Discussion Board</h5> 
    <ol> 
     {{ if .ViewData.Questions }} 
     {{ range .ViewData.Questions }} 
      <li> 
       <div class="q-comment"> 
        <div class="qanda questiondiv" id="questionarea" name="questionarea"> 
         <div> 
          <div id="topic" class="upvote pull-left"> 
           <a class="upvote"></a> 
           <span class="count">3</span> 
           <a class="downvote"></a> 
          </div> 
          <div > 
           <div class="qanda-info"> 
            <h6><p id="quest_title">{{.QuestionTitle}}</p></h6> 
           </div> 
           <p id="quest_text">{{.QuestionText}}</p> 
          </div> 
         </div > 

         <div class="qanda-info"> 
          <div class="user-info"> 
           <img src="/resources/img/team-small-2.png" /> 
          </div> 
          <h6>{{.UserId}}</h6> 
          <span class="date alt-font sub">{{.DateCreated}}</span> 
          <a id="answertext" name ="answertext" type="submit" class="link-text answerbutton">Answer</a> 
         </div> 
        </div> 
       </div> 
      </li><!--end of individual question--> 
     {{ end }} 
     {{ end }} 

    </ol> 
</div><!--end of comments list--> 

JS

//Enables and disables the answer elements 
//for all questions 
$('.answerbutton').on('click', function() { 
    console.log("In submit answer text area"); 
    newdiv = "<div id='answersection' name='answersection' class='form-input answersectiondiv'><textarea name='answertextarea' id='answertextarea' rows='8' cols='85' placeholder='Answer description*''></textarea><br/><div class='form-input'><a type='Submit' id='submitanswer' name='submitanswer' class='btn btn-primary'>Submit Answer</a><a type='Cancel' id='cancelanswer' name='cancelanswer' class='btn btn-primary cancelanswerbutton'>Cancel</a></div></div>"; 
    $('.questiondiv').append(newdiv); 
    //$('.answerbutton').prop('disabled' , true); 
    $('.cancelanswerbutton').on('click', function() { 
     console.log("In cancel answer area"); 
     $('.answersectiondiv').remove(); 
    }); 
    //$('.answerbutton').prop('disabled' , false); 
    }); 

Кроме того, я не в состоянии включить и отключить [answerbutton - прокомментировал в коде]. Может ли кто-нибудь помочь мне с этим? Я новичок в JQuery.

EDIT-1 основе @Satpal внушения я редактировал, как это,

$('.questiondiv').on('click', '.answerbutton', function() { 
    console.log("In submit answer text area"); 
    newdiv = "<div id='answersection' name='answersection' class='form-input answersectiondiv'><textarea name='answertextarea' id='answertextarea' rows='8' cols='85' placeholder='Answer description*''></textarea><br/><div class='form-input'><a type='Submit' id='submitanswer' name='submitanswer' class='btn btn-primary'>Submit Answer</a><a type='Cancel' id='cancelanswer' name='cancelanswer' class='btn btn-primary cancelanswerbutton'>Cancel</a></div></div>"; 

    $(this).closest('.questiondiv').append(newdiv); //Again use this to remove only parent container div 
}); 

$('.questiondiv').on('click', '.cancelanswerbutton', function() { 
    console.log("In cancel answer area"); 
    $(this).closest('.answersectiondiv').remove(); //Again use this to remove only parent container div 
}); 

Answer 1

Вы должны использовать this, это относится к элементу, который вызывается обработчик события.

$('.answerbutton').on('click', function() { 
    $(this).prop('disabled' , false); //Only commented code which needs to be updated added here 
}); 

Кроме того, Вы должны использовать Event Delegation с использованием .on() делегированных-событий подхода, при создании элементов динамически. Вместо привязки в обработчике кликов.

//Enables and disables the answer elements 
//for all questions 
$('.answerbutton').on('click', function() { 
    console.log("In submit answer text area"); 
    newdiv = "<div id='answersection' name='answersection' class='form-input answersectiondiv'><textarea name='answertextarea' id='answertextarea' rows='8' cols='85' placeholder='Answer description*''></textarea><br/><div class='form-input'><a type='Submit' id='submitanswer' name='submitanswer' class='btn btn-primary'>Submit Answer</a><a type='Cancel' id='cancelanswer' name='cancelanswer' class='btn btn-primary cancelanswerbutton'>Cancel</a></div></div>"; 
    $('.questiondiv').append(newdiv); 
    $(this).prop('disabled' , false); 
}); 
$('.questiondiv').on('click', '.cancelanswerbutton', function() { 
    console.log("In cancel answer area"); 
    $(this).closest('.answersectiondiv').remove(); //Again use this to remove only parent container div 
});