相同类名的多个元素会导致jquery click事件触发多次

Question

我显示用户评论。每个评论都是一个

，每个

都有一个class为“commentLikeLink”的标签。我将jquery click事件绑定到“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;
            });
        });

- 1110

---

你怎么知道它会触发10次？ - Shyju

即使页面上有十个具有相同类别的元素，并且已将点击事件绑定到该类别的元素，这并不意味着当其中一个被实际点击时就会触发其他所有十个元素的点击事件。 - Mike Brant

@Mike Brant 这是输出结果：<a class="commentLikeLink" href="/app/Comment/LikeComment" id="205">赞</a> - 1110

每次加载评论时，是否都包含了该 JavaScript 代码？ - MrOBrian

@MrOBrian：是的，那就是问题所在。我有一个视图，在循环中呈现所有评论。我把这个事件处理程序放在了那个循环里。我把处理程序放在父视图中，所以它可以工作 :) - 1110

Answer 1

您不应该获得10次点击。您可以将点击事件绑定到类上，但是触发事件的上下文是个别元素，因此如果您有一些标记看起来像这样：

<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个点击吗？

- kprobst

Answer 2

将点击事件绑定到类是更好的解决方案，但如果您在项目本身或类本身上使用它，它实际上可能会被多次触发！

因此，您应该这样做，它只会触发一次：

$('.commentLikeLink').one('click', function(event) {// 在这里执行操作}

$(document).on("click", ".commentLikeLink", function (ev) {
    //do things here
});

- Mouhamed Halloul

Answer 3

我之前也遇到过这个问题，当时是不小心在页面中多次包含了相同的.click脚本函数。请确保您的JavaScript只被包含一次。

- Joel Grannas