2

我有一种情况，每当用户单击#postComment 链接时，我都必须提交评论。

现在使用此代码第一次成功提交评论但不是第二次。我认为这是因为 jquery 不正确并且在这里 $('.comment a') 变得混乱。

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

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

查询：

 $('.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>
4

3 回答 3

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()用 name命名你传递给的函数表达式_this。我给函数起的这个名字只在函数本身内部可用。每当发表评论时，它都会将自己附加为下一个 a元素的单击事件处理程序。它还可以让您避免使用可能会导致性能损失的事件委托。（如果你关心那种事情。）

于 2012-05-11T19:53:33.873 回答
0

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

$(document.body).on("click", ".comment a", function(e) {
 // handle event
});
于 2012-05-11T19:57:45.600 回答
0

我相信问题可能是您在将回调附加到单击事件后附加了新按钮。

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

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

于 2012-05-11T20:04:09.630 回答