2

ユーザーのコメントを表示します。各コメントは 1 つでdiv、それぞれdivに<a>クラス ' ' のタグがありcommentLikeLinkます。jquery クリック イベントを ' 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;
            });
        });
4

3 に答える 3

6

クリック数が 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 回のクリックを獲得していますか?

于 2012-09-05T17:30:14.497 に答える
4

はい、クリックイベントをクラスにバインドすることはより良い解決策ですが、アイテム自体またはクラス自体で使用すると、実際には複数回発生する可能性があります!

したがって、これを使用する代わりに : $('.commentLikeLink').click(function (event) {//ここで処理を行います }

これを行う必要があり、一度だけ起動します:

$(document).on("click", ".commentLikeLink", function (ev) {
    //do things here
});
于 2013-12-04T15:24:00.763 に答える
3

以前、ページに同じ .click スクリプト関数を誤って複数回含めたときに、これが発生しました。JavaScript が 1 回だけ含まれていることを確認してください

于 2012-09-05T17:28:42.480 に答える