Question

我显示用户评论。每条评论都是一个div，每个div都有<a>个标记，其中包含“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;
            });
        });

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

Answer 2

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

Answer 3

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

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

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

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

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

3 个答案: