为什么我的 function 作品需要多次点击？

Question

我的代码正在运行，但是我必须单击它两次或更多次才能运行这是我的代码 on.ts：

    clickToScroll() {
    $("#ayogabung").click(function () {
      $('html, body').animate({
        scrollTop: $("#5StepDiv").offset().top
      }, 1000);
    });
  }

以及.html：

 <li class="nav-item" id="ayogabung" (click)="clickToScroll()" style="cursor: pointer;">
            <a class="nav-link">Ayo Gabung</a>
        </li>

Answer 1

为什么要点击两次？

根据您的 HTML 我希望clickToScroll在您单击 ID ayogabung的列表项时运行。

然后当clickToScroll执行时，它将通过调用$("#ayogabung").click(/*...*/);为 id ayogabung的元素的单击事件附加一个处理程序； .

因此，需要再次单击元素才能运行第二个事件处理程序。

---

重申一下，第一次单击会导致向单击事件添加第二个事件处理程序。 而第二个事件处理程序只有在第二次点击时才有机会运行。

如果这不是您想要的，请执行您放入$("#ayogabung").click(/*...*/);中的代码直接，而不是将其附加为事件处理程序。

我再说一遍， clickToScroll里面的代码在第一次点击时运行。 它添加了一个带有$("#ayogabung").click(/*...*/);的事件处理程序 . $("#ayogabung").click(/*...*/);里面的代码只有第二次点击才有机会运行。 如果您希望它在第一次单击时运行，请将当前位于$("#ayogabung").click(/*...*/);中的代码放入其中。 直接在clickToScroll内部。

---

我希望你明白我在说什么。 也许代码更清晰：

clickToScroll() {
  $('html, body').animate({scrollTop: $("#5StepDiv").offset().top}, 1000);
}

另一方面，您可以复制它而一无所知。 由你决定。