提交按钮未首次触发事件

Question

我正在尝试捕获提交按钮click事件，并将页面滚动到顶部，如果它还没有在那里。

由于某些原因，该事件不会第一次触发，即如果滚动大于0，则不会发生滑到页面顶部的情况。只有第二次才会激活。

var buttonSearch = function () {
    jQuery(document).ready(function () {
        $("#DashboardSearchButton").submit(function () {
            if (window.scrollY != 0) {
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        });
    });
};

<input id="DashboardSearchButton" type="submit" value="Search" onsubmit="buttonSearch();" />

有什么想法或建议吗？我是不是漏掉了什么？谢谢.

Answer 1

这样试试：

jQuery(document).ready(function () {
    $("#DashboardSearchButton").submit(function () {
        if (window.scrollY != 0) {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    });
});

<input id="DashboardSearchButton" type="submit" value="Search" />

您可以从元素的onclick/onsubmit属性调用一个函数，或者创建一个eventListener来监视事件，而不是两者兼而有之。

jQuery的事件侦听器是“在引擎盖下”创建的，可以这样说，如下所示：

$("#DashboardSearchButton").submit(function () { //stuff });

您从来没有看到.addeVentListener（“submit”,myFuncName)语句-jQuery为您做了这件事。

第一次不起作用的原因是您创建了两个事件侦听器。第一个事件由#DashboardSearchButton输入上的onSubmit=属性触发，只创建了第二个事件侦听器(jQuery.submit()处理程序。第二个eventListener创建后，它现在也会监听提交，第二次一切正常。但是，每次单击submit按钮，都会创建另一个jQuery事件处理程序。