Question

我遇到的情况是，每当用户点击#postComment链接时，我都必须提交评论。

现在使用此代码第一次成功提交评论但不是第二次。我认为这是因为jquery不正确而且在这里混淆$（'。comment a'）。

现在我想知道如何使用“this”关键字或任何其他可能的解决方案来访问这些变量。

每次提交评论时，newCommentBox变量都会附加到commentWrapper以生成新的commentBox。

Jquery的：

 $('.comment a').click(function(){


comment="<pre>"+$('textarea').val()+"</pre>";
newcommentBox="<div class='CommentBox'>"
        +"<div class='dp'><img src='../Images/defaultPic.jpg' width='50' height='50' /></div>"
        +"<div class='name'>Muazzam Ali</div>"
        +"<div class='comment'>"
        +"<textarea cols='70' rows='10'></textarea><br />"
            +"<a href='javascript:void(0)' id='postComment'><img src='../Images/commentbutton.png' height='30' width='90' /></a>"
        +"</div>"
    +"</div>";

$(this).prev().html("");
$(this).hide();

$(this).parent().html(comment);
$('#CommentWrapper').append(newcommentBox);

});

HTML：

    <div id="CommentWrapper">
          <div id="CommentHeading">Comments:</div>
    <div class="CommentBox">
        <div class="dp"><img src="../Images/defaultPic.jpg" width="50" height="50" /></div>
                <div class="name">Muazzam Ali</div>
                <div class="comment">Comment</div>
                </div>

    <div class="CommentBox">
        <div class="dp"><img src="../Images/defaultPic.jpg" width="50" height="50" /></div>
        <div class="name">Muazzam Ali</div>
        <div class="comment">
        <textarea cols="70" rows="10"></textarea><br />
            <a href="javascript:void(0)" id="postComment"><img src="../Images/commentbutton.png" height="30" width="90" /></a>
        </div>
    </div>
</div>

Answer 1

它没有第二次添加注释，因为您没有将click偶数处理程序添加到代表提交注释按钮的新a元素中。实际上，您必须再次将事件处理程序添加到此新创建的元素中。或者，使用jQuery的委派功能，使用on方法，将事件处理程序始终添加到a元素。

就个人而言，这就是我要做的事情。这是更新的JavaScript：

$('.comment a').click(function _this (){

    comment = "<pre>"+$('textarea').val()+"</pre>";
    newcommentBox = "<div class='CommentBox'>"
        +"<div class='dp'><img src='../Images/defaultPic.jpg' width='50' height='50' /></div>"
            +"<div class='name'>Muazzam Ali</div>"
            +"<div class='comment'>"
                +"<textarea cols='70' rows='10'></textarea><br />"
                +"<a href='javascript:void(0)' id='postComment'><img src='../Images/commentbutton.png' height='30' width='90' /></a>"
            +"</div>"
        +"</div>";

    $(this).prev().html("");
    $(this).hide();

    $(this).parent().html(comment);
    $('#CommentWrapper').append(newcommentBox);
    $('#CommentWrapper').find(".comment a").click(_this);

});

我在这里做的是将您传递给$(".comment a").click()的函数表达式命名为_this。我给这个函数的这个名字在函数本身里面只有。无论何时发表评论，它都会将自身附加为 next a元素的click事件处理程序。它可以让您避免使用事件委托，可以导致性能下降。（如果你关心那种事情。）

Answer 2

尝试使用委托（假设jQuery 1.7）

$(document.body).on("click", ".comment a", function(e) {
 // handle event
});

Answer 3

我认为问题可能是您在将回调附加到点击事件后附加了新按钮。

尝试将$(".comment a").click(function()...)替换为以下内容：

$(".comment a").live("click", function()...);它也将附加到新的

Jquery使用this关键字选择一个类

3 个答案: