Question

＆＃13;

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', {
	formatter: function(value) {
		return 'Current value: ' + value;
	}
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

问题：点击事件javascript

上不会显示Bootstrap Slider

说明： 如果我取消隐藏滑块HTML代码（没有onlclick事件）它的工作正常，但当我加载基于onlclick按钮滑块不显示只显示输入框

Answer 1

你的javascript有一个主要缺陷：

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

在您的代码调用中没有任何内容发生这种情况，页面将尝试在ID为#ex1的元素存在之前运行JS，因为它将在页面加载时运行。执行click事件后，没有任何内容告诉它将滑块与它相关联。你需要使用回调。试试下面的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;
    }
});
}

如何在点击事件（innerHTML javascript）的基础上加载Bootstrap滑块

1 个答案: