jQuery滑块自动播放按钮不起作用

Question

$('#btn-autoPlay.playoff').on('click', playOn);
$('#btn-autoPlay.playon').on('click', playOff);

function playOn() {

    $('.playoff').text("Autoplay: ON");
    timeId = setInterval(function () {
        nextSlide();
    }, 3000);
    $('.playoff').addClass('playon').removeClass('playoff');

}

function playOff() {

    $('.playon').text("Autoplay: OFF");
    clearInterval(timeId);
    $('.playon').addClass('playoff').removeClass('playon');

}

Details: When I first click button(#btn-autoplay.playoff), the text changes to "Autoplay: ON", as well as the class(.playoff) changes to class(.playon). But when I click the button second time, the button text doesn't change and the class is still '.playon'. What's wrong with this code?

Answer 1

Please try:

$(document).on('click', '#btn-autoPlay.playoff', playOn);
$(document).on('click', '#btn-autoPlay.playon', playOff);

Answer 2

You may need to delegate the events for dynamically generated items.

The body is a static parent here and the events are watched with the help of the static parent. If some HTML gets changed dynamically by JavaScript, the connected events tend to disappear, as they are not the same old DOM Elements.

$("body").on('click', '#btn-autoPlay.playoff', playOn);
$("body").on('click', '#btn-autoPlay.playon', playOff);

So, attaching the event to a near static parent, and delegating it to the right one, will work for you.