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

$('#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'。此代码有什么问题？

最佳答案

对于动态生成的项目，您可能需要delegate the events。

body在这里是静态父级，并且在静态父级的帮助下监视事件。如果某些HTML通过JavaScript动态更改，则所连接的事件往往会消失，因为它们不是相同的旧DOM元素。

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

因此，将事件附加到近乎静态的父项，然后将其委托给正确的父项，将对您有用。