JQuery Динамически добавленный класс Не работает

Question

Я застрял в своем Timerapp с jquery. Ниже мой сценарий,

1. One Button имеет класс с именем toStart
2. Когда щелчок на нем функция Аякса будет хранить текущее время в базе данных. (Аякс функция не в стеке-коде).

3. После успешной реакции ajax класс кнопки изменился на паузу. теперь имя класса кнопки является паузой.

4.После некоторого времени, когда снова нажмите кнопку (класс named: 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-> Сеть 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. Удаление этого класса не приведет к удалению слушателя.

Answer 2

Я сделал бы это так, так как он чище и удобочитаем. 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> 
-->