具有相同类的多个元素使 jquery click 事件多次触发答案

【问题标题】：Multiple elements with same class make jquery click event to fire multiple times具有相同类的多个元素使 jquery click 事件多次触发
【发布时间】：2012-09-05 17:11:32
【问题描述】：

我显示用户 cmets。每个评论都是一个div，每个div 都有<a> 标签，其类为'commentLikeLink'。我将 jquery 点击事件绑定到 'commentLikeLink' 类，但如果我有 10 个 cmets 并点击一个类似按钮，我会触发 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;
            });
        });

【问题讨论】：

你能显示你的最终源输出吗？
你怎么知道它会触发 10 次？
仅仅因为您在页面上有十个具有相同类的元素并将点击事件绑定到该类的元素并不意味着当其中一个被实际点击时，所有十个都获得点击事件。
@Mike Brant 这是输出：点赞
每次加载评论时都包含javascript代码吗？

标签： asp.net-mvc asp.net-mvc-3 jquery

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

所以不要这样：$('.commentLikeLink').click(function (event) {//在这里做事}

你应该这样做，它只会触发一次：

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

【讨论】：

【解决方案3】：

在我不小心在页面中多次包含相同的 .click 脚本函数之前，我曾发生过这种情况。确保您的 javascript 只包含一次

【讨论】：