Bootstrap Switch碰到的一些坑

基本用法

官方例子：Bootstrap Switch
例子解释参考：Bootstrap Switch的基本使用方法

1. 官方的例子HTML和JS是分开的, 所以看完官方例子可能会发现自己竟然不知道怎么去初始化一个组件！第二个参考讲解了如何在实际项目中如何使用。
2. $(“xxx”).bootstrapSwitch() 中xxx指的是input标签的类名

在异步中使用问题

要先有DOM元素出现, 再进行初始化, 否则会出现点击事件不触发的问题!

// 模拟ajax插入数据
setTimeout(function(){
	var dom = `<div class="switch" data-on="primary" data-off="info">
					<input type="checkbox" class="notice-switch" value="1" data-url="www.baidu.com"/>
				</div>
				`;
	$('#app').append(dom);
	$(".notice-switch").bootstrapSwitch({
	onColor: 'success',
	offColor: 'danger',
	size : "small",
	onInit: function(){},
	onSwitchChange: function(event, state) {
		console.log(event); // 开关触发事件
		console.log(state); // 开关状态
		if (state == true) { 
			// 打开时业务逻辑
		} else { 
			// 关闭时业务逻辑
		}
	}
});
},1000)

1. 在上面的onSwitchChange中, 能够在event读取到input开关value的值event.currentTarget.defaultValue
2. 有时开关需要添加一些业务参数, 可以在input内添加, 如data-url="www.baidu.com", 然后可以通过event.currentTarget.dataset.url获取

使用jquery的attr还是prop给组件赋值？

使用attr属性! attr会在标签内显式的添加checked属性, 而prop不会, 因为BS是通过判断input标签内是否有checked来控制开关显示的.
参考: jquery对checkbox的各种操作