第二次单击后触发敲除单击绑定

Question

如果单击带有此功能的页面，则我具有一个可剔除到页面上的部分的剔除绑定

scrollTo() {
    $("a.scroll").click(function(event) {
        event.preventDefault();
        $('body').animate({
            scrollTop: $(this.hash).offset().top
        }, 500);
    });
}

我在其中调用函数的html

<a class="scroll icon-arrow-down" href="#part" data-bind="localizedText: { id: '4-anchor-1', html: true }, tap: controller.scrollTo.bind(controller)"></a>

问题是它在第二次单击而不是第一次单击后触发。 当您单击页面上的某个按钮时，它也不会触发，再次单击它会触发，然后在其他按钮上正常运行时，也会发生这种情况。

Answer 1

问题是因为在第一次单击时，您调用scrollTo()绑定了事件。 然后在下一次和每次连续单击时，添加另一个click()处理程序并执行所有先前的click事件处理程序。 您只需要删除scrollTo()函数并在加载时添加事件：

<a class="scroll icon-arrow-down" href="#part" data-bind="localizedText: { id: '4-anchor-1', html: true }"></a>

$("a.scroll").click(function(event) {
    event.preventDefault();
    $('body').animate({
        scrollTop: $(this.hash).offset().top
    }, 500);
});

或者，如果将a元素动态附加到DOM，则需要使用委托的事件处理程序：

$(document).on('click', "a.scroll", function(event) {
    event.preventDefault();
    $('body').animate({
        scrollTop: $(this.hash).offset().top
    }, 500);
});

Answer 2

由于您使用的是淘汰赛，因此请勿使用jQuery事件绑定。 假设您已经定义了tap绑定处理程序（也就是说，像click一样调用事件处理程序），那么您的HTML标记就可以了。 只需将您的scrollTo方法变成事件处理程序即可。

scrollTo(event) {
    event.preventDefault();
    $('body').animate({
        scrollTop: $(this.hash).offset().top
    }, 500);
}