咨询：使用setInterval刷新DIV后jQuery Knob无法显示的解决办法

问题场景 #

在智能家居可视化项目中，使用jQuery Knob实现供暖温度调节功能，通过setInterval每秒刷新包含该Knob的<div>容器，但刷新后原本的Knob控件消失，仅显示原生输入框。

刷新前效果：

刷新后效果：

当前代码如下：

JavaScript代码 #

$(document).ready(
  function() {
    setInterval(function() {
      $("#schalter").load(" #schalter > *");
    }, 1000); //Delay here =  seconds
  });

$(".knobID").knob({
  'release': function(sendpostresp) {
    $.ajax({
      url: "publish.php",
      type: "POST",
      data: {
        foo: sendpostresp,
        test: '123'

      },
      success: function(result) {
        alert(result);
      }
    });
  }
});

HTML结构 #

<div class="schalter" id="schalter">
  <input type="text" data-angleoffset=-125 data-anglearc=250 data-fgcolor="#66EE66" value="22" class="knobID" data-step=".5" data-min="0" data-max="30">
</div>

问题原因 #

$(".knobID").knob()仅在页面初始加载时执行一次，仅对当时存在的DOM元素生效。而load()方法会替换容器内的DOM结构，新生成的输入框没有被调用knob()方法初始化，所以无法渲染成Knob控件。

解决方案 #

需要在每次load()完成后，重新初始化新的Knob控件。修改setInterval内的逻辑，利用load()的回调函数，在DOM更新完成后执行knob()初始化：

$(document).ready(function() {
  // 定义初始化Knob的函数，方便复用
  function initKnob() {
    $(".knobID").knob({
      'release': function(sendpostresp) {
        $.ajax({
          url: "publish.php",
          type: "POST",
          data: {
            foo: sendpostresp,
            test: '123'
          },
          success: function(result) {
            alert(result);
          }
        });
      }
    });
  }

  // 页面加载时先初始化一次
  initKnob();

  // 每秒刷新并重新初始化
  setInterval(function() {
    $("#schalter").load(" #schalter > *", function() {
      // 加载完成后回调，重新初始化Knob
      initKnob();
    });
  }, 1000);
});

优化建议 #

• 频繁的每秒刷新会增加服务器请求压力，建议改为按需刷新（比如后端推送更新时再刷新，或检测到温度值变化时才更新），可以使用WebSocket或长轮询方式替代固定间隔的load()。
• 如果仅需要更新温度数值，无需刷新整个DOM，直接通过$(".knobID").val(新数值).trigger('change')更新Knob的值即可，避免DOM重建带来的性能损耗和控件初始化问题。

内容的提问来源于stack exchange，提问作者sebahier