クリックイベントのBootstrapToggleチェックボックスコール機能

Question

新しいBootstrapToogleチェックボックスhttp://www.bootstraptoggle.com/にいくつかのイベントを添付しようとしていますが、どこに障害が発生しているのかわかりません。

だから、基本的に私は、ブートストラップtoogleを持っていると私はcheckedプロパティ（trueまたはfalse）に応じて、いくつかの関数を呼び出したい

<input type="checkbox" id="editor_draw_erase" data-toggle="toggle" data-on="Draw" data-off="Erase" data-onstyle="success" data-offstyle="danger"> 

$(function(){ 
    $("#editor_draw_erase").click(function() { 
    var Toggle = document.getElementById('editor_draw_erase'); 
     if (Toggle.checked) { 
     console.log("draw") 
      //call some function 
     } else { 
     console.log("erase") 
      //call some other functions 
     } 
    }); 

}) 

フィドル：https://jsfiddle.net/c7p9n62w/12/

私が間違っているの何任意のアイデア？

Answer 1

私は同じ問題に直面しています。ライブラリは自分の要素を作成し、チェックボックスは実際に変更されていないからです。

あなたのチェックボックスがクラスoffであるかどうかだけを見ることができます。

これは、チェックボックスをオンにしたときにDOMを調べることで確認できます。

$(".toggle").click(function() { 
    if($(this).hasClass("off")){ 
    console.log("draw") 
    } 
    else{ 
    console.log("erase") 
    } 
}); 

Example

Answer 2

var consoleLine = "<p class=\"console-line\"></p>"; 
 

 
    console = { 
 
    log: function(text) { 
 
     $("#console-log").append($(consoleLine).html(text)); 
 
    } 
 
    }; 
 
    $(function() { 
 
    $("#ids").on('click',function() { 
 
    alert('hai'); 
 
    var Toggle = document.getElementById('editor_draw_erase'); 
 
     if (Toggle.checked) { 
 
     console.log("draw") 
 
      //call some function 
 
     } else { 
 
     console.log("erase") 
 
      //call some other functions 
 
     } 
 
    }); 
 
    }) 
 
    
 

 

 
//console.log("draw")

<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> 
 
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ids"><input type="checkbox" id="editor_draw_erase" data-toggle="toggle" data-on="Draw" data-off="Erase" data-onstyle="success" data-offstyle="danger"></div> 
 
<p> 
 
State: 
 
</p> 
 
<div id="console-log"></div>