Слайдер пользовательского интерфейса jQuery не отображается при вызове с использованием innerHTML - PullRequest
Новая
       29

Слайдер пользовательского интерфейса jQuery не отображается при вызове с использованием innerHTML

0 голосов
/ 02 мая 2018

Я определил функцию в 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>

Приведенный выше код отображает ползунок, и когда я перемещаю его, я также вижу, как меняются значения. Похоже, что все работает нормально.

Но затем я добавил еще одну функцию writeQuestions() к своему <script> следующим образом: 

<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 вызывает некоторые проблемы. Любые идеи, как я могу решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 02 мая 2018

Порядок функций неправильный. Вы инициализируете слайдер до его создания. Смотрите комментарии ниже. 

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>
0 голосов
/ 02 мая 2018

У вас есть незакрытый тег <div class="slider-range" </div>, и во втором скрипте отсутствует закрывающая скобка:

Неправильно: 

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

Правильно: 

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

Рабочий пример: https://codepen.io/srm985/pen/pVPYYp

...