jQuery同士の干渉で問題が発生していますが、解決策を教えてください。
- jQueryの複数のファイルが干渉し合い、特定の動作が正常に動作しない問題が発生しています。
- 問題の原因は、jquery.validationEngine.nonreload.jsの中の一部のコードです。
- コードの修正と、ボタンを押したときの処理を変更することで、問題を解決することができます。
- ベストアンサー
jQuery同士の干渉の件で
わからない事があり、質問させていただきます。 http://ichi-ny.net/test/jquery.validationEngine.nonreload.js と、 http://ichi-ny.net/test/assets/js/main.js http://ichi-ny.net/test/assets/js/util.js http://ichi-ny.net/test/assets/js/skel.min.js が干渉し合って、 http://ichi-ny.net/test/jquery.validationEngine.nonreload.js の中の、 /* * 訂正ボタンを押したとき */ $(document).on('click','#back',function(){ //フォームを表示 $(form).find('input,select,textarea').show(); //確認画面で追加した文字部分を削除 $(".MyMailForm_value").remove(); //labelを表示する $('input[type=\"radio\"]').next('label').show(); $('input[type=\"checkbox\"]').next('label').show(); $(form).find('button').hide(); $("#button_default").show(); }); /* * 送信ボタンを押したとき */ $(document).on('click','#send',function(){ var data = form.serialize(); //フォームの内容を全て取得する $.ajax({ type: "POST", url: "sendmail.php", data: data, async: false, //同期通信に }).done(function(){ form.html('<div class="text-success">メールを送信しました</div>'); }).fail(function(){ form.html('<div class="text-danger">エラーが発生しました</div>'); }); }); が、動作しないのですが、どこが問題でしょうか？？ 漠然とした質問で申し訳ございませんが、よろしくご教授のほど、お願いいたします。
- osat99
- お礼率51% (17/33)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
予め・・・真剣には見てません。あたりを付けただけです。 http://ichi-ny.net/test/assets/js/main.js の $window.on('hashchange', function(event) { if (location.hash == '' || location.hash == '#') { とかぶってる気がします。 http://ichi-ny.net/test/jquery.validationEngine.nonreload.js の var $button = $("#button_default"); var button_html = '<a href="#" id="back">戻る</a>  '; button_html += '<a href="#" id="send">送信</a>'; を <a href="#" id="javascript:void(0);">戻る</a> とかにしたらどうです？ ※先にも書きましたが、動作確認も何もしてません。あてずっぽです。
その他の回答 (2)
- doraneko66
- ベストアンサー率11% (535/4742)
送信ボタンの方に debugger; かけて見ては？ var data ちゃんと取れてますか？
お礼
ありがとうございます！確認してみます！！
- muuming2001
- ベストアンサー率23% (202/845)
コンソール出してどんなエラーが出てるのか調べましょう。 http://www.buildinsider.net/web/chromedevtools/01
お礼
コンソールは、チェック済みでして、特にエラーは吐いてないんです。
関連するQ&A
- jQuery 動的にボタンが増えた時
<html> <head> <title>js sample</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> jQuery(document).ready( function() { $(".button_cls_1").click(function(){ alert('hello world! button 1'); }); $(".button_cls_2").click(function(){ alert('hello world! button 2'); }); }); </script> </head> <body> <input class="button_cls_1" type="button" value="テスト１" /> <input class="button_cls_2" type="button" value="テスト２" /> </body> </html> 上記のようなスクリプトでbutton_cls_1、button_cls_2が動的に増えた時に どのように書いたらいいかわかりません。 button_cls_1、button_cls_2、button_cls_3、button_cls_4の時もあれば button_cls_1、button_cls_2の時もあります。
- ベストアンサー
- JavaScript
- jQueryで設定したイベントハンドラが消える
jQueryについての質問です。 ちょっと言葉での説明が難しいので、具体的なコードを記載します。 === JavaScript === var clicked = function () { alert(1); }; var jqButton = $("<input type='button' value='test' />"); jqButton.click(clicked); $(function() { $("#showButton").click(function () { $("#test").html(jqButton); }); $("#hideButton").click(function () { $("#test").html(""); }); }); === HTML === <input type="button" id="showButton" value="show" /> <input type="button" id="hideButton" value="hide" /> <div id="test"></div> showボタンをクリックすると、testボタンが表示されます。 hideボタンをクリックすると、testボタンが消えます。 testボタンをクリックすると、alert(1) が実行されます。 という内容なのですが、一度hideしてから再度showして現れたtestボタンをクリックしても、 何も起きません。 仮に、jqButton.click(clicked); の部分を、 jqButton[0].attachEvent("onclick", clicked); などにすると、再表示させたtestボタンも動作します。 これはjQueryのイベントハンドラ設定APIを使った時特有の症状だと思うのですが、 なぜこのような結果になるのでしょうか。 てっきり、$.click()でイベントハンドラを設定すると、 内部でattachEventとかaddEventListnerとかが走るだけだと想像してましたが・・・ また、attachEventなど使わずに、jQueryの機能を使って、 再表示させてtestボタンも動作させるには、どうしたらいいでしょうか。 ご存知の方いましたら、お願い致します。
- ベストアンサー
- JavaScript
- jQueryでshow/hideが上手く行かない
入力フィールドとボタンを作成し、ボタンを押すたびに入力フィールドが表示・非表示を繰り返すようにしたいと思っています。 入力フィールドが表示されているときにはボタンは"hide"、非表示の時は"show"が表示されている仕様です。 <div id="input"><input type="text" name="something"></div> <input type="button" id="button" value="hide"> 以下のようにjQueryを組んでみました。 $(document).ready(function(){ if($("#button").attr("value") == "hide"){ $("#button").click(function(){ alert("VALUE=" + $("#button").attr("value")), $("#input").children().hide(), $("#button").attr("value", "show"); }); } else if($("#button").attr("value") == "show"){ $("#button").click(function(){ alert("VALUE=" + $("#button").attr("value")), $("#input").children().show(), $("#button").attr("value", "hide"); }); } }); まず、hideボタンを押すとhideのアラートが出てフィールドが非表示になり、showというボタンのみが残ります。 次にshowボタンを押すと、showのアラートは表示されますが、フィールドが再表示されず、ボタンもshowのままです。 elseのalertまで行っているのにその後が機能しないのは何故でしょうか？
- ベストアンサー
- JavaScript
- Jquery と JqueryUIについて
現在、Jquery と JqueryUIを使ってプログラムを書いています。上手く動作しないので以下について教えてください。 やりたいことは、ボタンを押すと文字があらわれたり消えたりするという動作を実現したいと思っていますが、今は、ボタンと文字が表示されるのみで、ボタンを押しても全く動きません。 現在書いているコードは以下のとおりです。 ---- <html> <head> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script> $(function() { $('#button').click(function(){ $('#sample-text').show(); }); }); </script> </head> <body> <input type="button" id="button" value="ボタン"> <p id="sample-text">Hello World!</p> </body> </html> ------------------- Jqueryのバージョンは、最初、UIとの互換性を考え、1.3.2を使っていましたが、動かないため、現在は新しいバージョンで試してみたところです。(１．４．４でもだめでした） JSファイルの場所は、上記htmlファイルと同じ階層のjsディレクトリ内です。 また、補足ですが、これが上手くいけば、script内の show メソッドのかわりに ｔoggleを使いたいと考えています。 上記コードで間違っている部分がわかる方がいらっしゃいましたら教えてください。 よろしくお願いいたします。
- ベストアンサー
- AJAX
- Jqueryの干渉について
Jqueryの干渉について Jqueryのライブラリを使ったjsを2つ同時に組み込もうとしておりますが、 干渉してしまっているようで、どちらか一つずつしか使えない状況です。 使おうとしているものは、spacegalleryというものと、nivosliderという jsを使おうとしています。 それぞれ同じサイトの解説文を参照しながら、組み込んでみました。 参考にしたサイトは、 http://www.skuare.net/test/spacegallery.html http://www.skuare.net/test/jnivoslider.html で、headの記述は、 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/eye.js"></script> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/spacegallery.js"></script> <script> $(document).ready(function(){ $('#myGallery').spacegallery({loadingClass: 'loading'}); }); </script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#hoge').nivoSlider({ effect:'random', // sliceDown、sliceDownLeft、sliceUp、sliceUpLeft、sliceUpDown、sliceUpDownLeft、fold、fade、random slices:15, //分割枚数 animSpeed:500, //アニメーションスピード pauseTime:3000, //停止時間 directionNav:true, //方向ナビ directionNavHide:true //隠す }); }); </script> 多分後からの記述の部分が前の記述をリセットさせてしまうと思うのですが、 上手くこの２つのスクリプトを同じページ内で稼働させる記述方法があれば 教えてください。 よろしくお願いします。
- 締切済み
- JavaScript
- ajax反映後のjqueryが動かない
色々と簡略化してますが、以下のようなajaxを交えたコードを書いています。 <script type="text/javascript"> $(function() { /* 初期変数処理 */ ............ /* HTML内object操作 */ ............ /* ある箇所をclickでイベント */ $('#hoge').click(function(e) ←(1)画面アニメーション { test3(); } /* 数秒後に(1)を自動実行 setInterval(function(){ ...... } /* formを使って検索 */ $('#form').submit(function(event) { event.preventDefault(); ........(中略) $.ajax({ type:"POST", url: "hoge.php", data:{data: data}, timeout: xxxxx, beforesend: { ........ }, complete: { ........ } success: function(data){ ......... ← (2)HTML内object操作、jquery部分は避ける test2(); } }); return false; }); function test1(){ ........ }; function test2(){ ........ }; function test3(){ ........ }; }); </script> [HTML] <form id = "form"> <input name="list"/> <button>送信！</button> </form> <div id="hogehoge"> ................. ←(3)検索で内容変更する箇所 </div> としているのですが、一度送信ボタンを押して(2)の処理を行った後、 (1)のアニメーションも含め、すべてのjquery要素が使用できなくなってしまいました。 http://semooh.jp/jquery/api/events/live/type,+fn/ によればliveを使えばclick処理はできるとありましたが、これでも動きません。 setIntervalの効果や、submitイベントすら動きませんでした。 なお、検索前は問題なく動作します。通常時は問題ないのですが、submit後からおかしいので、 ajaxに関してなにか見逃している箇所があるとは思うのですが、 どこが悪いのかはっきりと検討がついていません。 どなたかお知恵をお貸しいただけませんでしょうか。宜しくお願いします。
- ベストアンサー
- JavaScript
- jquery複数のcheckboxの値について
どうも、はじめまして、jqueryに興味をもった初心者です。 jqueryを利用で、phpファイルにcheckboxの値を渡し、loadでphpファイルを読み込みたいのですが、うまくいきません。。ご存知の方いましたら、 お手数ですが、教えてください。。 環境、php5.1,jquery1.4, ソース <!--html側--> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="chk.js"></script> <title></title></head> <body> <input type="checkbox" name="test[]" id="test" value="1">test1 <input type="checkbox" name="test[]" id="test" value="2">test2 <input type="checkbox" name="test[]" id="test" value="3">test3 <input type="checkbox" name="test[]" id="test" value="4">test4 <input type="submit" value="sub" id="sub"> <div id="hbox">ここにロードしたい</div> </body> </html> //chk.js --------------------------- $(function(){ $("#sub").click(function () { var chk = $(".@test:checkbo[name^='test[]']:checked") .val(); $("#hbox").load("form.php",{test:chk}); }); }); //form.php ---------------------------- <?php echo htmlentities( print_r($_GET, true) ); ?> 以上がソースです。。。このソースだと、 checkを入れた値１つしか、phpに渡すことができません。。 checkを入れた値をすべて、phpに渡し、loadしたいのですが、 方法が分からず困ってます。 ご存知の方いましたら、お手数ですが、 分かりやすく、教えていただけませんでしょうか お願いいたします。
- ベストアンサー
- JavaScript
- jQueryのアニメーションについて
jQueryのアニメーションについて聞きたいです。 チェックボックスと連動してボックスが表示されるアニメーションはわかりましたが、表示される際のアニメーションはどうすればいいかわかりません。 フロートで横並びになった一番・二番・三番の三つのボックスがあり、三番のみが表示されている場合、三番のボックスが一番左に表示されています。 そこで二番のチェックボックスにチェックをして、二番のボックスを表示ると、二番が左で三番がその右に表示されます。 その際、三番が右にずれるときにアニメーションでスライドできないでしょうか。 現在のソースです。 【CSS/Script】 <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> <style type='text/css'> input{margin:80px 0 0 80px;} div{ display:none; margin:25px; padding:25px; background:#eee; width:200px; height:150px; float:left; } </style> <script type='text/javascript'> $(window).load(function(){ $('#check1').click(function() { $("#box1").slideToggle(this.checked); }); $('#check2').click(function() { $("#box2").slideToggle(this.checked); }); $('#check3').click(function() { $("#box3").slideToggle(this.checked); }); }); </script> 【HTML】 <p> <label><input type="checkbox" id="check1">一番</label> <label><input type="checkbox" id="check2">二番</label> <label><input type="checkbox" id="check3">三番</label> </p> <div id="box1">一番を押してでるのです</div> <div id="box2">さては二番を押したから</div> <div id="box3">どれかと思えば三番でした</div> よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQuery - bind('click', x)
<!DOCTYPE html> <script src="jquery-1.7.1.js"></script> <style> .menu_items { display: none; } </style> <script> $(function() { $('.dropdown').each(function () { var menu = $(this).parent().children('.menu_items'); var hideFunc = function() { menu.slideUp(120); $(document).unbind('click', hideFunc); }; $(this).click(function() { menu.slideDown(120); $(document).bind('click', hideFunc); }); }); }); </script> <div> <button class="dropdown">Currency</button> <ul class="menu_items"> <li><button>USD</button> <li><button>EUR</button> <li><button>GBP</button> </ul> </div> -- jquery でメニューに表示・非表示をしたいと思ってます。 click したあとに、メニューを消す命令を bind してるってのに、 この hideFunc （メニューを消す命令） がすぐ呼ばれてしまいます。 適当な配列をフラグに使って二回目呼ばれたときには消す、みたいな解決策を思い来ましたが、 いまいちスマートな感じがしません。 ちゃんとクリックが終わったあとに hideFunc をバインドしたいのですが、それはなにかいい書き方あれば教えてください
- 締切済み
- JavaScript
- jqueryについて質問です。
jqueryについて質問です。 ----------------------------------------------------------- test.js $(window).load(function() { $("body").load("a.php"); $("#btn").click(function() { alert();///動作しない } }); ----------------------------------------------------------- a.html <input type="button" id="btn" name="btn" value="send"> ----------------------------------------------------------- load先のidのクリックを監視するにはどうしたらいいのでしょうか？
- ベストアンサー
- JavaScript
お礼
ありがとうございます。確認してみます！！
補足
お二方ともありがとうございました。コンソールを再度チェックしてみましたところ、元々正常に動作するページがありまして（そこにはmain.jsはありません）、それとのコンソールの比較をしますと、 main.jsの箇所の // Prevent clicks from inside article from bubbling. $this.on('click', function(event) { event.stopPropagation(); }); }); // Events. $body.on('click', function(event) { // Article visible? Hide. if ($body.hasClass('is-article-visible')) $main._hide(true); }); の箇所があれば不具合、なければ正常動作するということがわかりました。 単純に削除するだけだと、他の部分に影響が出てしまいまして、 再度ご教授出来ませんでしょうか、よろしくお願いいたします。