ajax反映後のjqueryが動かない

このQ&Aのポイント
  • ajaxを使ったコードで、submit後にjquery要素が使用できなくなる現象についての質問です。
  • submit後におかしくなる原因を特定することができず、解決方法を探しています。
  • liveを使ってもうまくいかず、setIntervalやsubmitイベントも影響がありません。どこが問題なのかわかりません。
回答を見る
  • ベストアンサー

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に関してなにか見逃している箇所があるとは思うのですが、 どこが悪いのかはっきりと検討がついていません。 どなたかお知恵をお貸しいただけませんでしょうか。宜しくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

liveはどっかのバージョンからonに変わってます。

rewip2014
質問者

お礼

ご回答ありがとうございます。 他サイトも参照しつつ、onを使用することで全ての問題が解決できました。 勉強不足で申し訳ありません。

その他の回答 (1)

  • _nayutax
  • ベストアンサー率75% (3/4)
回答No.2

#1さんの回答通りですね。 jQueryのバージョンを1.8.3にすれば問題なく動作すると思います。 Web上に流通しているプラグインや、ノウハウサイトの情報は、メンテナンスされていないものはほとんど1.9.x以降で使えません。

rewip2014
質問者

お礼

ご回答ありがとうございます。 参考サイトを確認するといくつか分かれていたbind系のAPIを統合していたのですね・・・ サンプルやリファレンスサイトを確認する際も、今後はバージョン等も気をつけるよういたします。

関連するQ&A

  • Jquery.ajaxでHTML読み込み

    現在、Jquery.ajaxを使って外部HTMLの読み込み処理を行い、処理完了後にフェードで表示させるということをしているのですが、読み込んだHTMLに貼り付けてある画像が読み込まれる前にHTMLが表示されてしまい、困っています。 Jquery.ajaxでは内包されている画像の監視まではできないのでしょうか? 下記が今作っているコードです。 $contest.css({ "opacity": 0 }); $.ajax({ type: "GET", url: "hoge.html" dataType: "html", success: function(data) { $contest.html($(data).find("#hoge")); }, complete: function() { $contest.stop().animate({ "opacity": 1 }, 1000, "easeOutCubic"); } }); おわかりになる方、ご教授お願いします。

  • JQueryはAJAXとは無関係??

    質問◆JQueryおよびJQueryMobileは「AJAX」とは無関係なのでしょうか? 「JQueryMobileを使っているとき、DOMによってHTMLを動的に差し替えている」という認識なのですが、 特にRequest関連の記載をJavaScriptで記載していない限り、AJAXの処理は行われないのでしょうか? それとも、 JQuery Mobileを使っている場合は、ページ遷移などで、プログラマが意識していなくても(独自にプログラムを書いていなくても) AJAXの処理が行われているのでしょうか? /************************************/ サーバへのリクエストはなくても、1つのマシン内の、HTMLファイルとHTMLファイルの間で、 HTTPで通信がされるということはないと思っています。 (※基本、HTTPはクライアントとサーバの間のときしか使われないのですよね?) JQueryの技術情報のサイトを見ていると、 よく「document.ready」と書かれていたりするソースを見かけますが、 これはAjaxとは関係なく(通信とは関係なく)、 また「xhr.send」も書かれていないHTMLは、AJAXは使われないという理解です。 (「Form、submit」とも関係がない) XMLHttpRequestも「HttpRequest」とあるわけですし、 「Form、submit」を書いているときに行われるわけではないけれども、かわりに、 「xhr.send」とJavaScriptで実行されたタイミングで走る処理であり、 その際、「サーバから返される情報がXMLのデータ形式で(XML以外もですが、、)」だという理解なのですが、合っていますでしょうか?

    • ベストアンサー
    • AJAX
  • jQueryでajax

    ajax(jQuery使用)を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート(This is success!)が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目1</option> <option value="2">項目2</option> </select> <p>結果:</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>

    • ベストアンサー
    • AJAX
  • jQuery.ajaxのdata部分を共通化したい

    以下のコードについてアドバイスいただきたくご質問しました。 jQuery.ajax({ type: "POST", url: "/hoge.php", data: { 'aaaaa':'あああああああああああ', 'bbbbb':'いいいいいいいいいいいいいいいい', 'ccccc':'うううううううううううううううううううう', 'ddddd':'えええええええええええええええええ' } }); jQuery.ajax({ type: "POST", url: "/test.php", data: { 'aaaaa':'あああああああああああ', 'bbbbb':'いいいいいいいいいいいいいいいい', 'ccccc':'うううううううううううううううううううう', 'ddddd':'えええええええええええええええええ' } }); ↑この形のコードが復数あります。 data{~~}の内部は、同じなので共通化?したいのですが、 この場合はどのように記述すれば良いのでしょうか。 よく行う共通処理をfunctionなどでまとめておくような外部化みたいな事は可能でしょうか。 拙い説明ですが、よろしくお願いいたします。

  • Ajaxの動き

    googleと本で調べたのですが、今いちわからないため質問させてください。 (1)教科書から、Ajaxは、XMLをJavascriptでやり取りしている非同期通信という定義なのはわかりましたが、結局、AJAXを使うということは、HTMLに、<Script>のタグで、JQueryなどのパスを書くということなのでしょうか? AJAXは概念的なものであって、プログラムやモジュールそのものではないと捉えています。 (2)Ajaxによる非同期通信は、何をきっかけとして通信が始まるのでしょうか? 通常は、FORMがSUBMITされたときに、サーバにリクエストがいくという認識ですが そもそも、Ajaxは、何をイベントとしてハンドルしているのでしょうか?(何をきっかけに処理が始まっているのでしょうか?) HTMLに、<Script>のタグで、JQueryのパスを書くと、ハンドルする機能が使用されるのでしょうか? Ajaxでも「リクエスト」は行われているけれども、処理結果として戻されるものがXML形式であるだけだという理解で良いのでしょうか?

    • ベストアンサー
    • AJAX
  • jqueryのajaxに引数を指定

    ajaxを利用して外部HTMLを読み込ませたいのですが$.ajax()などをonclickイベントなどで呼び出すとき引数を指定してurlを設定することはできませんか イメージとしては 例えばjqueryでloadingpageという関数を作って HTMLを <input type="button" onclick="loadingpage(http://www.hogehoge.com);"> って感じにしてボタンをクリックするとhttp://www.hogehoge.comがページ内で読みだされるようにしたいです。

  • cakePHP+Ajax アップロード状況の取得

    環境【cakePHP2.5, PHP5.5】 ファイルアップロードの進捗状況を取得してプログレスバーを表示したいのですが、うまくいかず困っております。 現状の方式は以下です(関連部分だけ抜粋) ●cakePHPのViewファイル(アップロードForm) <?php echo $this->Form->create('Model', array('type' => 'file')); ?> //Form作成 <?php echo $this->Form->hidden(ini_get('session.upload_progress.name'), array('value' => 'example')); ?> //PHPのアップロード状況取得設定 <?php echo $this->Form->file('upload_file'); ?> //ファイル選択 <?php echo $this->Form->submit('アップロード', array('div' => false, 'escape' => false));//submit ●Viewファイル内のjavascript(submitイベントを取得してajax通信) $(function() { $('#FormName').submit( function(event) { $.ajax({ url:'/controller/action', success:function (data, textStatus) { $('#progress').html(data); }, error:function (err) { console.log('ajax通信失敗:'+err); }, }); }); }); ●cakePHPのアクション ※アップロード処理は省略 public function action() { if ($this->request->is('ajax')) { //$_SESSIONキーから進捗状況を取得 $key = ini_get("session.upload_progress.prefix").'example'; $data = $_SESSION[$key]; //パーセンテージ計算 $progressData = round(($data["bytes_processed"]/$data["content_length"])*100); //結果表示用の変数に値を入れ、更新用のViewをrender $this->set(compact('progressData')); $this->render('/Elements/ajax/progress','ajax'); } } renderしているエレメントはアップロードViewファイルの中で指定しています。 大きく問題は2つあります。 1 ajax通信が動かない  cakePHPのアクションはキックしていますが(ログを吐かせて確認)、errorが返ってきます(errの中身は[ object Object ])。  ただし、submitイベント内ではなく、たとえば<input type=button>のonClickイベント関数の中に入れてやると正常に通信できます。  また、他にも数カ所ajax通信を行っている箇所がありますが、そちらは特に問題なく通信できています  なお、ajax通信部分をsetIntervalや関数に入れてSetTimeoutの中に含めると、アクションをキックすらできず何も動かない感じになります(なぜ…)  submitとajax通信は同時には出来ないものなのでしょうか? 2 ajax通信から$_SESSIONのupload_progress関連の値が取れない  ファイルアップロード中にcakePHPのアクションに普通にアクセス(GET)すると、アップロード状況が取得できるのですが、ajaxからこのアクションにアクセスすると値が取れない($_SESSION内にこのキーと値が存在しない)状態になります。  1の問題と絡んでいるような気もしますが、なぜajax通信のときだけ取得できないのか、原因が分からず困っております。 cakePHPでファイルアップロードの進捗を表示する機能をつくられている方など、なにかヒントを頂ければと思います。 なにとぞよろしくお願いします。

  • AJAXで新規表示されたボタンが稼働しない

    下記のようなものを作りました。 1 通常は下記のような <100購入>というボタンが表示されています。 <button class="button8" type="submit" name="volume" value="100">100購入</button> 2 <追加表示ボタン>を押すと、 <button class="button8" type="submit" name="volume" value="500">500購入</button>という<500購入>ボタンが新たに追加されます。 3 <100購入>ボタンか<500購入>ボタンを押すと、お好きな数値が購入できます。 前提条件 <100購入>ボタンは、当初から<form></form>内に直接記載されているボタンです。 <500購入>ボタンは、<追加表示ボタン>を押した際、AJAXにより、<form></form>内に新たに設置されるボタンです。 問題点 <100購入>ボタンは問題なく稼働します。 しかしながら、AJAXにより新たに設置された<500購入>ボタンを押しても、Formが稼働しません。 どのようにすれば、AJAXにより新たに設置された<500購入>ボタンが稼働するようになるでしょうか? よろしくお願いいたします。 +++++++++++++++++++++++++++++++++++++++++++++++++++ 当方が作ったソース <script type="text/javascript" src="./js/jquery.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <div id="msg">ここへ出力</div> <button class="button8" type="submit" name="volume" value="100">100購入</button </form> <BR> <button id="btn0">追加表示</button> <script type="text/javascript"> jQuery(function($){ $("#btn0") .click(function () { $.ajax({ beforeSend:function(BTN){ $("#msg").append("<BR>新規ボタンを表示します<BR>"); }, complete: function (BTN, textStatus) { $("#msg").append("<button class=\"button8\" type=\"submit\" name=\"volume\" value=\"500\">500購入</button><BR>"); } }); }); }); </script>

  • jqueryの$.ajaxで送信できない

    はじめまして。 jquery初心者ですが、$.ajax使ってのPOST送信ができません、php側でログを取ってみてもアクセスすらしません。若干お手上げなので、分かる方がいたら、アドバイスを頂けませんか? 【やりたいこと】 formにデータを入力(html)し → jqueryを使ってpost送信(js) → 認証(php) → 結果をhtmlに表示させたい。 【ソース】 -a.html- <form method="post" id="signin" action=""> <input id="email" name="email" value="" title="email" class="required" tabindex="4" type="text"> <input id="posturl" type="hidden" name="posturl" value="a.php"> <input id="signin_submit" value="Sign in" tabindex="6" type="submit"> </form> -------- -a.js- $(function() { $("form#signin").submit(function() { var email = $("input#email").val(); var postFile = $("input#posturl").val(); var data = {email:email}; $.ajax({ type: "POST", url: postFile, data: data, timeout: 1000, error: function(){ // エラー時 alert('Error'); }, success: function(data) { if(data != ''){ alert(data.result); } else { alert('no data'); } } }); }); }); -------- -a.php- (他略、とりあえず適当に出力してみる) echo "{'status': false,}"; exit; -------- よろしくお願いします。m_m

  • jQuery1.9.1でajax応答処理が動かない

    お世話になります。 jQuery1.9.1でajaxを使用したいのですが、表題の通りresponse受信時の処理が動かず困っています。 (下記コード抜粋で"test2"が表示されません。) 自分でも調べてはいるつもりですが、知識不足で何をどう調べた物かも分からず成果が上がらないため、何か助言を頂ければと思い投稿致します。 <問題> jQueryを使用してajax通信を行うコードがあるが、 サーブレットからの応答受信時の処理が実行されない。 <備考> ・同じソースコードを使用し、正常に動作する環境もあるため、  プログラム上のバグではなく環境構築の問題と思われる。 ・今日までjavaとjavaScriptの区別もつかなかった人間(私ですが)が環境構築しているので、  初歩の初歩でポカをやらかしている可能性は十分あり。 ・ajaxによるリクエスト送信とサーブレット側は動くことをデバッガで確認済み。 <環境> windows7 apache-tomcat 7.0.42 JDK 7u25 eclipse Java EE IDE(ver: kepler release / build id:20130614-0229) jQuery 1.9.1 jQuery-ui 1.10.3 <コード抜粋> ・java script側 <script src="//code.jquery.com/jquery-1.9.1.js" ></script> <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js" ></script>  ~省略~ <script> $(function() { $('#test-form').on('submit',function() { alert("test1"); $.ajax({ url: "${pageContext.request.contextPath}/test", type: "POST", data: { inputStr: $('#test-form').find('input[name="testInput"]').val(), }, }).done(function (data, textStatus, jqXHR) { alert("test2"); }); return false; }); }); </script> ・サーブレット側 { String inputWork = request.getParameter("inputStr");  ~省略~ StringBuilder stringBuilder = new StringBuilder(); stringBuilder.append("<result>"); stringBuilder.append("OK"); stringBuilder.append("</result>"); String xmlString = stringBuilder.toString(); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); Writer writer = response.getWriter(); writer.write(xmlString); writer.flush(); }

    • ベストアンサー
    • Java