如何为在 JQuery 中共享 class 名称的动态添加的单个元素添加事件？

Question

在我的用例中，我遍历对象列表并在 html 中显示每个对象的同一组 class 名称。如果我单击某个元素的按钮，则应该为该对象触发事件，而不是为共享相同 class 名称的所有其他元素触发事件。

但是以下代码会触发共享 class 名称的每个元素。

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 using .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
});

如何为在 JQuery 中共享 class 名称的动态添加的单个元素添加事件？

How to add events for dynamically added single element which shares the class names in JQuery?

html

jquery

element

classname