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

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)时，文本更改为“自动播放:ON”，并且类(.playoff)更改为类(.playon)。但是当我第二次单击该按钮时，按钮文本没有改变，并且类仍然是“.playon”。这段代码有什么问题？

Answer 1

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

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

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

因此，将事件附加到近乎静态的父级，并将其委托(delegate)给正确的父级，将适合您。