asp.net-mvc - 具有相同类的多个元素使 jquery click 事件多次触发

Question

我显示用户评论。每条评论都是一条div每个 div有<a>带有类 ' commentLikeLink 的标签'。我将 jquery click 事件绑定(bind)到 ' commentLikeLink ' 类，但如果我有 10 条评论并点击一个“赞”按钮，我的事件就会被触发 10 次。
我知道发生这种情况是因为我多次上同一个类。但如何阻止这种情况呢？
代码如下:

...
<div class="commentBox"">
...
@Html.ActionLink(likeText, "LikeComment", "Comment", null, new { id = Model.CommentId, @class = "commentLikeLink" })    
...

事件代码:

$(function () {
            $('.commentLikeLink').click(function (event) {
                var commentId = event.target.id;

                $.ajax({
                    url: this.href,
                    type: 'POST',                    
                    data: { commentId: commentId },
                    context: this,
                    success: function (result) {
                        if (result.msg == '1') {
                            $(this).text('Dislike');
                        }
                        else if(result.msg == '2') {
                            $(this).text('Like');
                        }

                    }
                });
                return false;
            });
        });

Answer 1

您不应获得 10 次点击。您可以将单击事件绑定(bind)到类，但触发事件的上下文是单个元素，因此如果您有一些如下所示的标记:

<p>
    <a href="#" class="clickItem">Liked?</a>
    <br />
    <a href="#" class="clickItem">Liked?</a>
    <br />
    <a href="#" class="clickItem">Liked?</a>
    <br />
    <a href="#" class="clickItem">Liked?</a>
</p>

这样就可以了，将链接文本设置为“喜欢!”单击每个按钮时:

$(document).on("click", ".clickItem", function (ev) {
    $(this).text("Liked!");
});

你调试过代码了吗？您确定一次会获得 10 次点击吗？