Jquery动态添加的类不起作用答案

【问题标题】：Jquery Dynamically added class Not workingJquery动态添加的类不起作用
【发布时间】：2015-05-17 13:58:21
【问题描述】：

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

一个按钮的类名为 toStart
点击它时，ajax 函数会将当前时间存储在数据库中。（ajax 函数不在堆栈代码中）。

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

4.一段时间后，当再次单击按钮（类名为：暂停）时，我想调用当前单击时间的 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 函数并将类（暂停）添加到按钮中（工作正常）。

但是当我点击按钮（类名：pause）时，toStart 函数开始工作，然后暂停函数同时工作。

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

附加我的 Webdeveloper->网络图。您可以看到 addStart Ajax 执行了两次。

【问题讨论】：

按pause后请尝试删除pause类。

标签： javascript jquery html ajax delegation

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>
-->

【讨论】：