- ベストアンサー
AJAXで新規表示されたボタンが稼働しない
- AJAXにより新たに設置された<500購入>ボタンが稼働しない問題の解決方法について教えてください。
- 質問文章では、<100購入>ボタンは問題なく稼働していますが、AJAXで追加される<500購入>ボタンが稼働しないという問題が発生しています。
- どのようにすれば、AJAXにより新たに設置された<500購入>ボタンが正しく稼働するようになるでしょうか？
- tajix14
- お礼率72% (175/242)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
>非表示要素だと、そのスペースが空欄として残ってしまい、 >(買い)のボタンは見えるけど(売り)のボタンはスクロール >しないと見えないということになってしまいます。 これは違いますね。非表示にすればその要素の高さはなくなります。 静的に動くのであれば、ajaxやめて表示・非表示切り替えにしたほうがいいです。 ajaxは無意味です。 で、以下の様なサンプルを作ってみました。 テキストファイルとして保存してブラウザで見れば動きますのでご確認下さい。 <!DOCTYPE html> <html> <head> <title>売り買いテスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <form action="abc.cgi" method="post" name="form1" id="form1"> <button id="btn0">買い</button> <div id="kai" style="display:none"> <button id="b100" type="submit" name="b100" value="100">100購入</button><br> <button id="b200" type="submit" name="b200" value="200">200購入</button><br> <button id="b300" type="submit" name="b300" value="300">300購入</button><br> <button id="b400" type="submit" name="b400" value="400">400購入</button><br> <button id="b500" type="submit" name="b500" value="500">500購入</button><br> <button id="b600" type="submit" name="b600" value="600">600購入</button><br> <button id="b700" type="submit" name="b700" value="700">700購入</button><br> <button id="b800" type="submit" name="b800" value="800">800購入</button><br> </div> <button id="btn1">売り</button> <div id="uri" style="display:none"> <button id="s100" type="submit" name="s100" value="100">100売却</button><br> <button id="s200" type="submit" name="s200" value="200">200売却</button><br> <button id="s300" type="submit" name="s300" value="300">300売却</button><br> <button id="s400" type="submit" name="s400" value="400">400売却</button><br> <button id="s500" type="submit" name="s500" value="500">500売却</button><br> <button id="s600" type="submit" name="s600" value="600">600売却</button><br> <button id="s700" type="submit" name="s700" value="700">700売却</button><br> <button id="s800" type="submit" name="s800" value="800">800売却</button><br> </div> </form> <BR> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#btn1").click(function (e) { e.preventDefault(); $("#uri").show(); $(this).prop("disabled", true); }); }); </script> </body> </html>
その他の回答 (3)
- ONEONE
- ベストアンサー率48% (279/575)
追記： 追加表示ボタンを押すたびに500購入が出てしまうので、一回押したら追加表示を消すか不活性にしないといけないですね。
補足
ご指摘有難うございます。「一回押したら追加表示を消すアイデア」、とても参考になりました。その方向で作りたいと思います。
- ONEONE
- ベストアンサー率48% (279/575)
そもそも、なぜこのような作りにしたかを伺ってもいいですか？ ボタンを表示させるだけならajax使う必要なくて 非表示要素を表示させるだけでいいですし。 あと、問題を切り分けて考えて頂きたいのですが、 動的に表示したから動かないのかどうか （静的にある<500購入>ボタンはうまく動作するのか） を検証してみて下さい。 PS. あげられたソースを動作させてみましたが すべてのボタンでサブミットされてしまいます。 以下のように、引数にeを追加し、内部に e.preventDefault(); で通常の動作をストップさせたら私の環境では とりあえずうまくいっているように思えます。 $("#btn0").click(function (e) { e.preventDefault();
補足
>ボタンを表示させるだけならajax使う必要なくて >非表示要素を表示させるだけでいいですし ありがとうございます。 スマートフォン向けサイトを作っており、画面が小さいというのがajaxを使う理由です。 「当初はボタンが2つ (買い)または(売り)」しかありません。 (買い)のボタンを押すと、その下にずらりと購入数選択のボタンが20個ほど出てくる (売り)のボタンを押すと、その下にずらりと売却数選択のボタンが20個ほど出てくる 非表示要素だと、そのスペースが空欄として残ってしまい、(買い)のボタンは見えるけど(売り)のボタンはスクロールしないと見えないということになってしまいます。 そこで、ajaxで、買い または 売り のボタンを押した時点で、ずらりと選択数が出て来るようにしたいと考えています。 >（静的にある<500購入>ボタンはうまく動作するのか） はい、静的ボタンであれば問題なく動きます。 >動的に表示したから動かないのかどうか その通りです。 環境は違いますが、下記の方もajaxのfunction内部に記載したdocument.readyが通らないことで悩まれていますが、これと同じ現象と思います。(下記の方の解決方法をベースに試しましたが、うまくいきませんでした) http://blog.goo.ne.jp/xmldtp/e/622977fa982050f3847acb6ec3ff7615 >PS. あげられたソースを動作させてみましたが >すべてのボタンでサブミットされてしまいます。 当方の現象と違います。何故なのでしょうか? 本当に申し訳ございません。 当方の環境はPHPです。MySQLに数値をインストールしようとしています。ただ、静的ボタンであれば問題なく動くため、やはりAJAXのFUNCTION内部にsubmitを施すと出来ないことそのものが問題のようです。 尚、a href であれ動作します。submitだけが駄目のようです。 ご教示頂きました情報をベースに下記でテストしましたが、まだ駄目でした。申し訳ございません。 <button class="button8" type="submit" name="volume" value="550">550購入</button> </form> <BR> <button id="btn0">ボタン表示</button> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $.ajax({ beforeSend:function(BTN){ $("#msg").append("<BR>ボタンを表示します<BR>"); }, complete: function (BTN, textStatus) { $("#msg").append("<button class=\"button8\" type=\"submit\" name=\"volume\" value=\"350\">350購入</button><BR>"); } }); }); }); </script>
- ONEONE
- ベストアンサー率48% (279/575)
$(document).on('click', 'selector', function(){ //ここに処理を書く }); jQuery 1.7以降かな。古いとonは使えません。
補足
有難うございます。 また、いろいろ試していたためお返事が遅くなり申し訳ございません。 ご指導頂いた方法だけでなく、それをヒントにいろいろ検索し試してみたのですが、処理部分にsubmitボタンを記入すると、やはりsubmit出来ません。 a href であれば有効に作動しますが、submitの文字を使った瞬間に作動しません。 もし、ヒントなど頂けましたら幸いです。 よろしくお願いいたします。
お礼
有難うございます!! AJAXで凝り固まったまま1週間くらいジタバタしていました。 こんな簡単な方法があったとは知りませんでした。 <div id="uri" style="display:none"> 感激です!! わざわざ私のソースを試してくださったり、作りたいものを確認して下さった上で、全く違ったアプローチからアドバイスいただいたことにより、当方の難問を解決出来ました。 本当に有難うございました。 深く、深く御礼申し上げます。