一次点击多次触发jQuery点击事件

Question

当单击一个元素时,我在jQuery中注册多次点击时遇到问题.我已经阅读了Stack Overflow上的一些其他线程来尝试解决它,但我认为这是我编写的代码.HTML代码无效,但这是由某些HTML 5和使用YouTube嵌入代码引起的.没有任何影响点击的内容.

jQuery,在document.ready上触发

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中,单击一下即可记录"Click!" 16次!Chrome只能看到一个,但两个浏览器都显示上述代码存在问题.

我是否错误地编写了代码或者是否存在错误？

- 一些额外的信息------------------------------------------

setupHorzNav由我的代码中的另一个函数调用.我测试了这个,并确认它只在初始加载时调用一次.

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

导航'prev-next'有多个实例.所有目标都是不同的锚.所有都在同一个html页面内.

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

Answer 1

尝试解除像这样的click事件

$(this).unbind('click').click(function (e) {    
});

Answer 2

您不需要.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在连续单击时添加多个事件处理程序(和日志消息)