Javascript Dijit form horizontalSlider仅第一次加载?

Javascript Dijit form horizontalSlider仅第一次加载?,javascript,jquery,dojo,Javascript,Jquery,Dojo,我使用dojo脚本创建图表,使用dijit滑块进行缩放和平移。第一次滑块加载正确,但第二次(从另一页返回后)图表加载正确,但这些滑块除外。使用Jquery进行事件处理。刷新页面后,工作正常 第一次使用CSS时 <table> <tbody> <tr> <td class="pad" align="center">ZOOM X(<span id="scaleXValue">1</span>&

我使用dojo脚本创建图表,使用dijit滑块进行缩放和平移。第一次滑块加载正确,但第二次(从另一页返回后)图表加载正确,但这些滑块除外。使用Jquery进行事件处理。刷新页面后,工作正常

第一次使用CSS时

<table>
  <tbody>
        <tr>
        <td class="pad" align="center">ZOOM X(<span id="scaleXValue">1</span></td></tr>
        <tr>
        <td>
          <table widgetid="scaleXSlider" id="scaleXSlider" style="width: 450px;" class="dijit dijitReset dijitSlider dijitSliderH" rules="none" data-dojo-attach-event="onkeydown:_onKeyDown, onkeyup:_onKeyUp" role="presentation" border="0" cellpadding="0" cellspacing="0" lang="en">
            <tbody>
              <tr class="dijitReset"><td class="dijitReset" colspan="2">
                <td data-dojo-attach-point="topDecoration" class="dijitReset dijitSliderDecoration dijitSliderDecorationT dijitSliderDecorationH"></td>
                <td class="dijitReset" colspan="2"></td>
              </tr>

              <tr class="dijitReset">
                 <td class="dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH">
                    <div class="dijitSliderDecrementIconH" style="display:none" data-dojo-attach-point="decrementButton">
                       <span class="dijitSliderButtonInner">-</span>
                    </div>
                 </td>
                 <td class="dijitReset">
                    <div class="dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderLeftBumper" data-dojo-attach-event="press:_onClkDecBumper"></div>
                 </td>
                 <td class="dijitReset">
                    <input value="1" data-dojo-attach-point="valueNode" type="hidden">
                        <div class="dijitReset dijitSliderBarContainerH" role="presentation" data-dojo-attach-point="sliderBarContainer">
                          <div style="width: 0%;" role="presentation" data-dojo-attach-point="progressBar" class="dijitSliderBar dijitSliderBarH dijitSliderProgressBar dijitSliderProgressBarH" data-dojo-attach-event="press:_onBarClick">
                            <div class="dijitSliderMoveable dijitSliderMoveableH">
                              <div aria-valuenow="1" tabindex="0" aria-valuemax="5" aria-valuemin="1" data-dojo-attach-point="sliderHandle,focusNode" class="dijitSliderImageHandle dijitSliderImageHandleH" data-dojo-attach-event="press:_onHandleClick" role="slider"></div>
                            </div>
                          </div>
                          <div style="width: 100%;" role="presentation" data-dojo-attach-point="remainingBar" class="dijitSliderBar dijitSliderBarH dijitSliderRemainingBar dijitSliderRemainingBarH" data-dojo-attach-event="press:_onBarClick">
                          </div>
                        </div>
                 </td>
                 <td class="dijitReset">
                   <div class="dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderRightBumper" data-dojo-attach-event="press:_onClkIncBumper"></div>
                  </td>
                  <td class="dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH">
                    <div class="dijitSliderIncrementIconH" style="display:none" data-dojo-attach-point="incrementButton">
                      <span class="dijitSliderButtonInner">+</span>
                    </div>
                  </td>
                </tr>
                <tr class="dijitReset">
                  <td class="dijitReset" colspan="2"></td>
                  <td data-dojo-attach-point="containerNode,bottomDecoration" class="dijitReset dijitSliderDecoration dijitSliderDecorationB dijitSliderDecorationH">
                  </td>
                  <td class="dijitReset" colspan="2"></td>
                </tr>
              </tbody>
             </table>

缩放X(1
-
+
这是第二次

<table>
    <tbody><tr><td class="pad" align="center">ZOOM X(<span id="scaleXValue">1</span>)</td></tr>
    <tr><td>
            <div id="scaleXSlider" data-dojo-type="dijit/form/HorizontalSlider" value="1" minimum="1" maximum="5" discretevalues="6" showbuttons="false" style="width: 450px;">
            </div>
    </td></tr></table>

缩放X(1)

所有css类都不是第二次加载的。您能帮助我:(.

Dojo跟踪它通过指定id创建的对象/小部件。如果您在具有相同id的对象上再次运行解析器,Dojo会尝试创建第二个实例,但已经有一个,因此它应该在js控制台中抛出错误

在再次解析同一页面之前,请先销毁创建的小部件/对象ID。在这里,我已将“小部件”声明为全局变量,因此,如果存在任何小部件ID,请在解析之前销毁它们

if(widgets){
    widgets.forEach(function(widget) {
    widget.destroyRecursive();
});
}
widgets =  dojo.parser.parse();
这对我有用

有关更多详细信息,请参阅下面的链接