3

要素が 1 つだけクリックされたときに複数のクリックが jQuery に登録されるという問題があります。Stack Overflowの他のスレッドを読んで解決しようとしましたが、それは私が書いたコードだと思います。HTML コードは無効ですが、一部の HTML 5 と YouTube 埋め込みコードの使用が原因です。クリックに影響を与えるものは何もありません。

document.ready でトリガーされる jQuery

function setupHorzNav(portalWidth) {
    $('.next, .prev').each(function() {
        $(this).click(function(e) {
            var target = $(this).attr('href');
            initiateScroll(target);
            console.log("click!");
            e.stopPropagation();
            e.preventDefault();
            return false;
        });
    });

    function initiateScroll(target) {
        var position = $(target).offset();
        $('html, body').animate({
            scrollLeft: position.left
        }, 500);
    }
}

HTML の例

<nav class="prev-next">
    <a href="#countdown-wrapper" class="prev">Prev</a>
    <a href="#signup-wrapper" class="next">Next</a>
</nav>

Firefox では、1 回のクリックで "Click!" を記録できます。16回！Chrome には 1 つしか表示されませんが、両方のブラウザーで上記のコードに問題が見られます。

コードを間違って書いたのでしょうか、それともバグがありますか?

-- 追加情報 ------------------------------------------

setupHorzNav は、コード内の別の関数によって呼び出されます。これをテストしたところ、初期ロード時に一度だけ呼び出されることを確認しました。

if ( portalWidth >= 1248 ) {
    wrapperWidth = newWidth * 4;
    setupHorzNav(newWidth);
}
else
{
    wrapperWidth = '100%';
}

nav 'prev-next' の複数のインスタンスがあります。すべてが異なるアンカーをターゲットにしています。すべてが同じ html ページ内にあります。

<nav class="prev-next">
    <a href="#video-wrapper" class="prev">Prev</a>
</nav>
4

4 に答える 4

8

このようにクリックイベントのバインドを解除してみてください

$(this).unbind('click').click(function (e) {    
});
于 2013-02-13T14:51:04.333 に答える
5

.each()イベントハンドラーをバインドする必要はありません。代わりにこれを試してください：

$('.next, .prev').click(function(e){
        var target = $(this).attr('href');
        initiateScroll(target);
        console.log("click!");
        e.stopPropagation();
        e.preventDefault();
        return false;
});

編集：setupHorzNavそれを引き起こしているのは 、関数内からイベントハンドラーをアタッチする方法だと思います。$(document).ready()とか何かから一度だけ付けるように変更してください。

イベントハンドラーから呼び出される関数からイベントハンドラーをアタッチすることで、複数のイベントハンドラーの状況を取得することができました。その結果、クリックイベントハンドラーの数は、クリックするたびに幾何学的に増加し続けます。

これはコードです:(そしてjsfiddleデモ）

function setupNav() {
    $('.next, .prev').each(function () {
        $(this).click(function (e) {
            setupNav();
            var target = $(this).attr('href');
            console.log("click!");
            e.stopPropagation();
            e.preventDefault();
            return false;
        });
    });
}

setupNav();

クリックイベントハンドラーから関数を呼び出すと、連続するクリックsetupNav()で複数のイベントハンドラー（およびclickログメッセージ）がどのように追加されるかを確認してください

于 2013-02-13T14:48:56.937 に答える
3

バインディング関数を複数回呼び出しているかどうかは質問から明らかではないため、すばやく汚い修正は次のようになります。

$('.next, .prev').unbind('click').click(function() {
    ...
});

ここで行っているのは、以前にバインドされたイベントハンドラーのバインドを解除clickし、新たにバインドすることです。

于 2013-02-13T14:51:10.380 に答える
1

他にクリックバインディングはありませんか？

ページを ajax で読み込んでいますか?

これを試すこともできます：

$('.next, .prev').click(function (e) {
    var target = $(this).attr('href');
    initiateScroll(target);
    console.log("click!");
    e.stopPropagation();
    e.preventDefault();
    return false;
});
于 2013-02-13T14:54:05.233 に答える