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');

}

詳細信息：當我第一次單擊按鈕（＃btn-autoplay.playoff）時，文本更改為“自動播放：開”，並且class（.playoff）更改為class（.playon）。 但是，當我第二次單擊按鈕時，按鈕文本不會更改，並且該類仍為'.playon'。 此代碼有什么問題？

Answer 1

請試試：

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

Answer 2

您可能需要將事件委派給動態生成的項目。

該body在這里是靜態父對象，並且在靜態父對象的幫助下監視事件。 如果某些HTML通過JavaScript動態更改，則所連接的事件往往會消失，因為它們不是相同的舊DOM元素。

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

因此，將事件附加到近乎靜態的父對象，然后將其委托給正確的父對象，將對您有用。