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）时，文本将更改为＆＃34;自动播放：ON＆＃34;以及类（.playoff）更改为类（.playon）。但是当我第二次点击按钮时，按钮文字没有改变，而且课程仍然是“播放”。这段代码有什么问题？

Answer 1

请尝试：

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

Answer 2

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

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

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

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

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

2 个答案: