- ベストアンサー
JqueryMobileでフォームボタンを非表示
- JqueryMobileを使用している環境下でフォームボタンを非表示にする方法を探しています。
- ID2のボタンが消えない問題について解決方法を教えてください。
- JqueryMobileを使用していない環境では問題なくボタンが非表示になることを確認しています。
- mmei
- お礼率74% (120/161)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
原因がわかりました。 jquery mobileでは、HTMLに対してjquery mobile側で動的にタグを追加してスタイリングを行います。 chrome等のブラウザのdeveloper tools(ページ上で右クリック、要素を検証)のelementタブで描画されているページのコードを見ることができますが、 そこで今回のコードのinputタグのあたりを見てみると、下記のようになっています。 ---------------------------- <div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false" style="display: none; "> <span class="ui-btn-inner ui-btn-corner-all"> <span class="ui-btn-text">消えるボタン</span> </span> <input type="button" value="消えるボタン" name="button2" id="button2" class="ui-btn-hidden" aria-disabled="false"></div> ---------------------------- このように、実際にはinputタグではなくinputタグの外側にdivタグを追加してそれに対してスタイリングを行い、ボタンとして表示しています。 故に、inputタグに対して"display: none"を指定しても意味はありません(外側のボタン本体であるdivタグは表示されっぱなしのため) そのため、ボタンを消すためにはinputタグの親であるdivタグに対して"display: none"を指定する必要があります。 実際のコードは下記のようになります。 ---------------------------- <script type="text/javascript"> (function($){ $("input[name=button1]").bind("click", function(event){ //parent()で親要素を取得、親要素(ここではdiv)に対してhide()を実行 $("input[name=button2]").parent().hide(); }); })(jQuery); </script> ---------------------------- 先に述べたように、jquery mobileではdivタグ等が勝手に追加されます。 動作がうまく行かないときはdeveloper tools(firefoxならfirebug)で実際に描画されているページがどのような構成になっているのか、確認することをおすすめいたします。
その他の回答 (2)
- bornless
- ベストアンサー率46% (7/15)
jQuery Mobileでは下記で消せます。 <script type="text/javascript"> (function($){ $("input[name=button1]").click(function(){ $("input[name=button2]").hide(); }); })(jQuery); </script>
お礼
ご指摘のスクリプトで試しましたが、消えませんでした・・・。 以下に該当ページのすべてのスクリプトを記載致します。 私がロードしているJqueryMobileのバグでしょうか？？？ <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <link type="text/css" href="js/jquery.mobile-1.0.min.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script> </head> <body> <div id="main" data-role="page"> <div data-role="header" data-position="inline" data-backbtn="false" data-theme="b"><h1>ボタン消し</h1> </div> <div data-role="content"> <form name="myForm" action="#"> <input type="button" value="消去" name="button1"> <input type="button" value="消えるボタン" name="button2"> </form> <script type="text/javascript"> (function($){ $("input[name=button1]").click(function(){ $("input[name=button2]").hide(); }); })(jQuery); </script> </div> </div> </body> </html>
- kosukejlampnet
- ベストアンサー率44% (126/282)
何のためにjQueryを使っているんでしょう？ そんな印象のコードですね。 <form name="myForm" action="#"> <input type="button" value="消去" name="button1"> <input type="button" value="消えるボタン" name="button2"> </form> <script type="text/javascript"> <!-- $(function(){ $("input[name=button1]").click(function(){ $("input[name=button2]").hide(); }); }); } // --> </script> 補足 var n = document.getElementById("#2"); ←「#」は要らないはず。本来は動かないはずだか、要素にアクセスしている。（おそらくブラウザが記述ミスを吸収している？） n.style.visibility = "hidden"; ←ここで隠している。 $('#2').button('refresh'); ←ここでjQueryが再表示している リファレンス読むべし。 http://semooh.jp/jquery/
お礼
早々のご回答ありがとうございます。 教えていただいたコードで試しましたが、ボタンは消えませんでした・・・。 なお、以下の3行をヘッダーに記述しています。 <link type="text/css" href="js/jquery.mobile-1.0.min.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script> どのようにすれば、ボタン消去ができるのでしょうか？
補足
ヘッダーに記述したJquery関連の読み込みですが、 以下の三行を記述すると、ボタンは消えませんが、JqueryMobileの2行を消すと、ボタンが消えました。 JqueryMobileの環境下だと、ボタンが消せないのでしょうか・・・。 【OK】 <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> 【NG】 <link type="text/css" href="js/jquery.mobile-1.0.min.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>
お礼
ありがとうございます！動作確認できました！ 様々な本やネットを調べていてもわからず諦めかけていたのですが、解決できました。また、chromeなどを用いた検証方法についても教えて頂きまして、今後のサイト開発に重宝します。