3

当仅单击一个元素时，我在 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%';
}

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

查看从 click 事件处理程序调用函数如何在连续单击时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 回答