Jquery 动态添加 class 无效

Question

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

一个按钮 class 名为 toStart
单击它时，ajax 函数会将当前时间存储在数据库中。（ajax 函数不在 stack-code 中）。

3.after 成功 ajax 响应按钮 class 更改为暂停。现在 class 按钮的名称是暂停。

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

5.Then 按钮 class 名称将更改为旧名称 (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');
}

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

on body 当我点击按钮时加载它进入 ajax 功能并添加 class （暂停）到按钮（工作正常）。

但是当我单击按钮（class 名称：暂停）时，toStart 函数起作用，之后暂停函数同时起作用。

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

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

Answer 1

您还需要对第一个侦听器进行事件委托：

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

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

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>
-->

Jquery 动态添加 class 无效

Jquery Dynamically added class Not working

html

javascript

ajax

jquery

delegation