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

由于您使用的是Knockout，请不要使用jQuery事件绑定。假设您已经定义了tap绑定处理程序（也就是说，调用click之类的事件处理程序），那么您的HTML标记就可以了。只需将scrollTo方法转换为事件处理程序即可。

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

第二次点击后，Knockout点击绑定会触发

2 个答案: