Question

function createslider(){ 
 
document.getElementById("loadSlider").innerHTML='<input id="ex1" data-slider-id="ex1Slider" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>'; 
 
} 
 

 

 
// Without JQuery 
 
var slider = new Slider('#ex1', { 
 
\t formatter: function(value) { 
 
\t \t return 'Current value: ' + value; 
 
\t } 
 
});

#ex1Slider .slider-selection { 
 
\t background: #BABABA; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/css/bootstrap-slider.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.js"></script> 
 

 

 
<button onclick="createslider()"> Click me</button> 
 

 

 
<div id="loadSlider"> 
 
<!-- 
 
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>--> 
 

 
</div>

問題： を場合、私は：ブートストラップスライダーが

を説明javascriptのクリックイベントに表示されていません（onlclickイベントなしの）スライダーHTMLコードを非表示にしてもうまく動作しますが、onlclickボタンのスライダーは表示されません。入力ボックスは表示されません

Answer 1

あなたのjavascriptのは一つの大きな欠陥を持っている：あなたのコード内

var slider = new Slider('#ex1', { 
    formatter: function(value) { 
     return 'Current value: ' + value; 
    } 
}); 

何もこれが起こる呼び出していない、ページは、ページのロード時に実行されますので、ID #ex1を持つ要素が存在する前に、JSを実行しようとします。クリックイベントを実行すると、スライダを関連付けるように何も表示されません。コールバックを使用する必要があります。下のjavascriptを試してみてください。

function createslider(){ 
document.getElementById("loadSlider").innerHTML='<input id="ex1" data-slider-id="ex1Slider" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>'; 
addNewSlider(); // let the callback attach the new slider once the new node has been added to the dom 
} 


// Without JQuery 
function addNewSlider() { // callback at work 
var slider = new Slider('#ex1', { 
    formatter: function(value) { 
     return 'Current value: ' + value; 
    } 
}); 
}