Jquery动态添加了类不起作用

Question

我被Jquery卡在了我的Timerapp中。以下是我的情景，

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

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

4.过了一段时间，当再次单击按钮（类名为：pause）时，我想调用当前点击时间的ajax函数并将值存储在数据库中。

5.然后Button类名称将更改为old（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-＆gt;网络图。您可以看到addStart Ajax执行两次。

Answer 1

您还需要在第一个侦听器上进行事件委派：

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

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

Answer 2

我会这样做，因为它更干净，更易读。 演示@ fiddle

$(document).on("click", ".control", function() {
    var $this = $(this);
    //ajax function { addStart}
    if ( $this.is(".toStart") ) {
        $this.removeClass('toStart').addClass('pause');
        $this.text("Start"); //for demo only
        //Code to be executed when paused
    } else {
        $this.addClass('toStart').removeClass('pause');
        $this.text("Pause"); //for demo only
        //Code to be executed when played/started
    }
});

HTML：

<button class="control pause" value="1" va>Start</button>
<!--
OR
<button class="control toStart" value="1" va>Pause</button>
-->