如何在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 
}); 

此外，你需要使用.on()委派事件的方法，動態生成的元素時使用Event Delegation。而不是在點擊處理程序中綁定。

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