bootstrap的switch監聽事件

今天運用了bootstrap的switch的控件,然後我想當點擊switch的時候,會有一些dom的操作,但是我看了官方文檔,裏面的js拿過來使用的時候,是沒有任何效果的

我的switch寫法:

<divclass="checkbox checkbox-switch">
<label>
<inputid="mySwitch"type="checkbox"data-on-text="開啓"data-off-text="關閉"class="switch"data-size="mini"name="status">
</label>
</div>

bootstrap的官方文檔事件處理內容:

事件處理(Event handler) javascript

ONOFF
$('#mySwitch').on('switch-change', function (e, data) {
    var $el = $(data.el)
      , value = data.value;
    console.log(e, $el, value);
});
上面這個對於我的switch無效,我後面查了一些文檔和別人寫的一些博客,然後這個方法對於我的switch有效果:(可以正常打印)

$('input[type=checkbox]').bootstrapSwitch({ onSwitchChange:function(){
console.log(111)
} });

參考的bootstrap switch文章鏈接:

http://www.jb51.net/article/88463.htm



補充一下怎麼建立switch

首先引入jquery

然後引入bootstrap

最後引入bootstrap的switch的js和css

<link href="bootstrap.css" rel="stylesheet" type="text/css">

<link href="bootstrap-switch/bootstrap-switch.min.css" rel="stylesheet" type="text/css" >

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap-switch/bootstrap-switch.min.js">
</script>

然後給個input

<input type="checkbox" name="my-switch" checked>

js寫以下代碼,不然switch控件出不來

$("[name='my-switch']").bootstrapSwitch();




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章