bootstrap-switchのイベント

デジタルエンディングノート「人生金庫」でbootstrapを使ってるんですが、ボタンも使いたいなと思い、bootstrap-switchを導入してみました。

本家はこちら

テストしたページはこちら

bootstrap3を使用しています。

いろいろハマりました。。。

1)色が変わらない

サンプルで、スイッチの作り方が

<div id=”sw” class=”make-switch”>
</div>

となってたんですが、


<div class="make-switch" data-on-color="success" data-on-text='はい' data-off-color="default" data-off-text='いや'>

な感じで、色の変更のパラメータなんかを与えてもぜんぜん変更にならない。

サンプルではできてるんですが。。。

で、あれこれ調べてみた所、現在は、


<input name="d-sw" type="checkbox" checked data-on-color="success" data-on-text='はい' data-off-color="default" data-off-text='いや'>

ある意味シンプルな形で記載をしたら反映してくれました。

2)イベントが発生しない

スイッチを動かした時イベントが発生してくれる・・・んですが、それがまたサンプルと違って。。

サンプルでは


$('#d-sw').on('switch-change', function()

な表現になってるんですが、どうしてもイベントを補足できませんでした。

で、ドキュメントを見てみると、「全てのイベントはnamespaceに発生する」ナンチャラって書いてあって、形が違ってたんですよね。

※Ver3になって変わった模様。。

現在は、こんな感じで実装しています。


<script type="text/javascript">
 $(document).ready(function(){
  $('[name="d-sw"]').bootstrapSwitch();
  $('input[name="d-sw"]').on('switchChange.bootstrapSwitch', function(event,state){
   console.log(state);
   alert(state);
  });
 });
</script>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です