Jquery / JavaScript boostrap Switchery clearInterval 不起作用

Question

我的网站上有一个 boostrap switchery：

<div class="form-group">
        <label class="checkbox-inline checkbox-right checkbox-switchery switchery-sm">
                <input type="checkbox" class="switchery" id="test55">
                    Live
        </label>                                
</div>
<div id="tableHolder"></div>

我想实现这个：

在页面加载时将外部页面加载到 "tableHolder" div。
Switchery 默认关闭。
当您单击 switchery 时，加载相同的外部页面，但 div 每 5 秒刷新一次。
如果关闭开关，只显示加载的外部页面，没有刷新间隔。

我遇到了麻烦，因为一切正常，但是当我按下开关关闭时，div 仍然保持刷新，所以 clearInterval 不起作用:(

这是我的脚本：

<script type="text/javascript">
 $(document).ready(function () {
   $('#tableHolder').load('external.php?name=myId001')
   var documentInterval = 0;
   $('#test55').change(function () {

     if ($(this).prop("checked")) {

       documentInterval = setInterval(function () {
         $('#tableHolder').load('external.php?name=myId001')
       }, 3000);

     } else {

       clearInterval(documentInterval)
     }
   });
 });
</script>

Answer 1

使用点击，而不是更改功能。

$(document).ready(function() {
    $('#tableHolder').load('external.php?name=myId001');
    var elem = document.querySelector('#test55');
    var init = new Switchery(elem);
    var documentInterval = 0;
    var clickCheckbox = document.querySelector('#test55');
    $(document).on('click', '#test55', function() {
        if ($(this).prop("checked")) {
        documentInterval = setInterval(function() {
            $('#tableHolder').load('external.php?name=myId001');}, 3000);
        } else {
          clearInterval(documentInterval);
        }
    });
});

Sample fiddle here。这将在开关打开时将一些文本附加到 div 并在开关关闭时停止附加。如果将 'click' 事件更改为 'change' 事件，即使开关关闭，文本追加也会继续

Jquery / JavaScript boostrap Switchery clearInterval 不起作用

Jquery / JavaScript boostrap Switchery clearInterval doesn't work

javascript

checkbox

jquery

switchery