使用 innerHTML 调用 jQuery UI 滑块时不显示

Question

我在 javascript 中定义了一个函数来显示一个 jQuery 滑块，如下所示：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 <script>

 function loadSliders(){
    $(".slider-range").slider({
            range:   true,
            min: 0,
            max: 100,
            values: [20, 80],
            slide: function( event, ui ) {
               // find any element with class .amount WITHIN scope of $this
               $(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
            }
        });
  }

$(document).ready(function() {
    loadSliders();
});
</script>

我在我的html代码中使用如下：

<span class="amount"> </span>
<div class="slider-range"> </div>

上面的代码显示了一个滑块，当我滑动它时，我看到值也在变化。基本上，一切似乎都运行良好。

然后，我在<script> 中添加了另一个函数writeQuestions()，如下所示：

<script>
function writeQuestions(){  
question_html = '<span class="amount"> </span><div class="slider-range"> </div>';
document.getElementById("questions").innerHTML = question_html;
        }

function loadSliders(){
    $(".slider-range").slider({
            range:   true,
            min: 0,
            max: 100,
            values: [20, 80],
            slide: function( event, ui ) {
               // find any element with class .amount WITHIN scope of $this
               $(this).parent().find(".amount").html(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
            }
        });
  }

$(document).ready(function() {
            loadSliders();
            writeQuestions();    
        });
</script>

现在当我按如下方式运行 html 时：

<div id="questions"></div>

滑块不显示。为什么？？我这样做的原因很难解释，因为我需要在 writeQuestions() 函数中添加大量内容并且我希望能够使用它。在我看来，.innerHTML 命令引起了一些问题。有什么想法可以解决这个问题吗？

Answer 1

函数顺序错误。您在创建滑块之前对其进行初始化。请参阅下面的 cmets。

function writeQuestions() {
  question_html = '<span class="amount"> </span><div class="slider-range"> </div>';
  document.getElementById("questions").innerHTML = question_html;
}

function loadSliders() {
  $(".slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 80],
    slide: function(event, ui) {
      $(this).parent().find(".amount").html(ui.values[0] + " - " + ui.values[1]);
    }
  });
}

$(document).ready(function() {
  writeQuestions(); // create slider first
  loadSliders(); // then initialize the slider
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="questions"></div>

Answer 2

您有一个未关闭的标签 <div class="slider-range" </div>，而您的第二个脚本中缺少右括号：

不正确：

$(document).ready(function () {
    loadSliders();
    writeQuestions();
}

正确：

$(document).ready(function () {
    loadSliders();
    writeQuestions();
});

工作示例：https://codepen.io/srm985/pen/pVPYYp