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中，只需点击一下即可“点击！” 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

尝试解锁像这样的点击事件

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

了解如何从click事件处理程序调用{{1}}函数在连续点击时添加多个事件处理程序（以及setupNav()日志消息）

Answer 3

由于您的问题不清楚您是否多次调用绑定函数，因此快速而肮脏的修复将是：

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

你在这里做的是取消绑定任何先前绑定的click事件处理程序和重新绑定。

Answer 4

其他地方没有其他点击绑定吗？

您是否使用ajax加载页面？

你也可以试试这个：

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

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

4 个答案: