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

I display user comments. Each comment is one div and each div has <a> tag with class 'commentLikeLink'. I bind jquery click event to 'commentLikeLink' class but If I have 10 comments and click on one like button I get event fired 10 times.
I know that this happen's because I have same class multiple times. But How to stop this?
Here's the code:

我显示用户评论。每个注释都是一个div，每个div都有标签，类为“commentLikeLink”。我将jquery click事件绑定到'commentLikeLink'类但是如果我有10个注释并单击一个类似按钮，我会将事件触发10次。我知道这发生了，因为我有多次同班。但是如何制止这个？这是代码：

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

Event code:

活动代码：

$(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;
            });
        });

3 个解决方案

#1

I had this happen before when i accidently included the same .click script function multiple times in the page. Make sure your javascript is only included once

我之前发生了这种情况，当我意外地在页面中多次包含相同的.click脚本功能时。确保您的javascript仅包含一次

#2

You shouldn't be getting 10 clicks. You can bind the click event to the class, but the context in which the event is fired is the individual element, so if you had some markup that looked like this:

您不应该获得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>

Then this would work, setting the link text to "Liked!" as each one is clicked:

然后这将工作，将链接文本设置为“喜欢！”每个人都被点击：

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

Have you debugged the code? Are you sure you're getting 10 clicks all at once?

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

#3

yes binding the click event to the class is a better solution, but it can actually get fired multiple times if you use it on the item it self or the class it self !

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

so instead of having this : $('.commentLikeLink').click(function (event) {//do things here }

所以不要这样：$（'。commentLikeLink'）。click（function（event）{//在这里做事}

you should do this and it will only fire once :

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

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

#1