jQuery动态添加的类不起作用

Question

I am stucked in my Timerapp with jquery. Below is my scenario,

1. One Button has class named toStart
2. When click on it an ajax function will storing current time in database.(ajax function not in stack-code).

3.after successful ajax response the button class changed to pause. now the class name of the button is pause.

4.After some time, when Click on the Button again (class named:pause), i want to call a ajax function with current time of click and store the values in database.

5.Then the Button class name will changed to 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');
}

This process repeating for every click function simultaneously.

on body loads when i click on the button it goes to the ajax function and added class (pause) into the button (working fine).

But when i click on the button (class name: pause) the toStart function working and after that the pause function working in same time.

How can i solve this issues..

Attaching my Webdeveloper->Network Graph. You can see the addStart Ajax performing twice.

Answer 1

You need event delegation on the first listener as well:

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

Why? Because the way you did it added the listener on all .toStart elements. Removing that class will not remove the listener.

Answer 2

I would do it this way as it's cleaner and readable. Demo@ 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>
-->