javascript - Jquery动态添加的类不工作

Question

我的 Timerapp 卡在了 jquery 中。以下是我的场景，

1. One Button 有名为 toStart 的类
2. 当点击它时，ajax 函数会将当前时间存储在数据库中。(ajax 函数不在堆栈代码中)。

3.ajax响应成功后，按钮类更改为暂停。现在按钮的类名是暂停。

4.一段时间后，当再次点击按钮(名为:pause 的类)时，我想用当前点击时间调用一个 ajax 函数并将值存储在数据库中。

5.然后 Button 类名将更改为旧的 (toStart)。

HTML:

<button class="toStart" value="1" va>Start</button>

JS:

$('.toStart').click(function()  
{
   //ajax function { addStart}
   $("button[value=1]").removeclass('toStart');
   $("button[value=1]").addClass('pause');
}

$(document.body).on('click','.pause',function() 
{
  //ajax function {addStop}
  $("button[value=1]").addClass('toStart');
}

此过程对每个点击功能同时重复。

当我点击按钮时，在主体加载时它会转到 ajax 函数并将类(暂停)添加到按钮中(工作正常)。

但是当我单击按钮(类名:暂停)时，toStart 函数开始工作，之后暂停函数同​​时工作。

我该如何解决这个问题..

附上我的 Webdeveloper->Network Graph。您可以看到 addStart Ajax 执行了两次。

Answer 1

您还需要对第一个监听器进行事件委托(delegate):

$(document.body).on('click', '.toStart', function()  
{
   //ajax function { addStart}
   $("button[value=1]").removeclass('toStart');
   $("button[value=1]").addClass('pause');
}

为什么？因为你这样做的方式在所有 .toStart 元素上添加了监听器。删除该类不会删除监听器。