JQUERY 单击事件仅在第一次单击调用时不起作用

Question

在代码中，我尝试打印保存为每个按钮的数据值的名称。但是在第一次单击事件调用时它不起作用。 而在第一次之后它正常工作。

注意： off('click') function 这是因为如果没有它，这个 function 会以以下速率多次触发：点击 1 次，下一次点击 2 次，下一次点击 3 次，下一次点击 4 次，... ... 等等。

所以 it(off('click')) 可以防止这种情况发生。

$(document).on('click', '.btn-add', () => {

   $(".btn-add").off('click').on('click', (obj) => {

      const nameOfProduct = obj.currentTarget.value;

      console.log("name selected = " + nameOfProduct);

   })

})

Answer 1

这可能是您想要做的，在文档准备好后，添加按钮单击处理程序：

 $(document).ready(() => {
    $(".btn-add").on('click', (obj) => {

      const nameOfProduct = obj.currentTarget.value;

      console.log("name selected = " + nameOfProduct);

   })
 })

您的代码删除处理程序，然后在每次单击按钮后将处理程序添加到按钮单击中。因此，在第一次单击后，您尝试删除，然后添加处理程序。 之后你触发处理程序 function，删除处理程序并添加处理程序，这可能不是你想要做的。