#現象
ons-switchコンポーネントを配置し、スイッチをON/OFFすると<span>タグ内のテキストが変更される簡単なプログラムを作成しましたがうまく動きません。
#再現手順
「Onsen UI V2 JS Minimum」テンプレートから作成、jqueryとonsenUIのJS/CSSコンポーネントを追加してindex.htmlを下記のようにコーディングしました。
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 15 <script> 16 ons.ready(function() { 17 console.log("ons ready!"); 18 $("#swValue").text(mySwitch.isChecked); 19 mySwitch.on("change", 20 function(event){ 21 console.log("mySwich is Changed!") 22 $("#swValue").text(mySwitch.isChecked); 23 } 24 ); 25 }); 26 </script> 27</head> 28<body> 29 <ons-navigator id="myNavigator" page="Page1.html"> 30 </ons-navigator> 31 <ons-template id="Page1.html"> 32 <ons-page id="Page1"> 33 <!--属性をvar="mySwitch"でも動かない--> 34 <ons-switch id="mySwitch" ></ons-switch> 35 <span id="swValue"></span> 36 </ons-page> 37 </ons-template> 38</body> 39</html>
#調べたこと
App Logには次のように出力されます。
ons ready!
typeof mySwitch.isChecked is undefined
スイッチをON/OFFしても
mySwich is Changed!はログ出力されません。つまりイベントを捕捉できていない、と思われます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/02 07:39