• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:【jQuery】 changeが検出できない)

【jQuery】changeイベントが検出できない

このQ&Aのポイント
  • MySQL + PHP + javascript with jQueryでプログラムを作成しています。$.ajaxでPHPを呼び出し、inputの値を変更してもchangeイベントが検出されません。
  • changeイベントが検出できない原因や対処方法について知りたいです。プログラムから変更されたval()をイベントとして取得する方法があるのかどうか教えてください。
  • val()の変更を即座に検出し、アラートを表示する方法についても教えてください。

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

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 onchangeは値が変更されてフォーカスが外れると呼びされるので取得できないのだと思います。 js側で値を変えたときにイベントを実行したいのであればそのjs側で値を変えるときにonchangeで実行しようとしていることを実行すれば同じことだと思いますがいかがでしょうか。 hidden要素はユーザがブラウザ上で変更出来ないのだから jsの$('#hoge').val("after value");とするタイミングでalert("hogehoge");を実行する。 jsで値を変えようとしている時点でいつ呼ばれるかわかっているはずですので。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • jqueryでajaxsuccessの内側this

    いつもお世話になっております jqueyで質問なのですが、ajaxの成功したときに起動する successの内側で$(this).val()を呼び出し、CSSにアクセスしたいのですが 期待した動作にはなりません。 期待する動作 それぞれクリックすると「1」「2」「3」と出て背景が赤くなる。 実際の動作 エラー「e.nodeName is undefined」となります。 どなたか、successの内側から$(this)にアクセスする方法をご存知の方いらっしゃいませんでしょうか 他の方法で期待の結果になるようにではなく、successの内側から$(this)にアクセスする方法が知りたいです お忙しい中恐縮ですが、分かる方がいたら嬉しいです <input class="hoge" value="1" /> <input class="hoge" value="2" /> <input class="hoge" value="3" /> <script type="text/javascript"> $(document).ready(function() { $('.hoge').click(function(){ $.ajax({ url: "some.html", cache: false, success: function(){ alert( $(this).val() ); $(this).css('background-color','red'); } }); }); }); </script>

  • jQueryで複数の要素オブジェクトを取得したあと

    jQueryで複数の要素オブジェクト(というの?)を取得するケースで、jQueryオブジェクトとして扱えなくなっていることが気持ち悪く、ここをどうにかできないかという話です。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <input type="text" id="ii1" name="nn" value="マツコ"> <input type="text" id="ii2" name="nn" value="竹田"> <input type="text" id="ii3" name="nn" value="小梅太夫"> <script> jQuery(function ($) {   alert($("#ii1").val()); // (0)   alert($("[name=nn]:eq(1)").val()); // (1)   alert($("[name=nn]:first-child").val()); // (2)   alert($("[name=nn]")[2].value); // (3)   alert($("[name=nn]").get(1).value); // (4) }); </script> このソースで、(0)はいいとして、(1)(2)のようにオブジェクトが一つしか返らないような場合には、「.val()」メソッドが使えます。しかし(3)(4)の場合には、少なくともこのままでは「.val()」メソッドが使えないため、Elementオブジェクトのvalueプロパティを使用しています。 値を取得するコードで「.val()」「value」が混在しているのが気持ち悪く、「value」に統一したいです。ちなみに実際には「$("[name=nn]")」のように取得したあと、for文でまわして処理するケースが多いです。 「$("[name=nn]")」で取得し、オブジェクトの件数をカウントしたあと苦肉の策で、for文の中で「$("[name=nn]:eq(" + i + ")").val()」等と書いたこともありますが、むしろ読みにくくなってしまっています。これだったらまだvalueプロパティを使う方がいいかと思います。 「$("[name=nn]")」で複数のオブジェクトを取得した後で、それぞれのオブジェクトに「.val()」を使う方法はありますでしょうか?あるのなら具体的に教えてください。 よろしくお願いします。

  • Jquery AJAXで、1ページに複数のフォームを設置するにはどうす

    Jquery AJAXで、1ページに複数のフォームを設置するにはどうすればいいでしょうか? 現在、以下のコードでメール送信をしてます。 1ページに複数のフォームがあり、押されたフォームボタンによって、そのフォームに対応した各value値をajaxの処理のところで受け取りたいです。 今のコードだと1つ目のフォームボタンを押すと正常にメールが送信されますが2つ目のフォームボタンを 押しても何も起こりません。 formにユニークなidをつけてsendmail.phpに変数を渡す前に、フォームボタンが押される度に ここの値をクリアしなければならないのかなと思っています。 >data : { message: $('#message').val(), exebtn:$('#exebtn').val()}, ----- index.php ------------------------- <略> <script type="text/javascript"> //<![CDATA[ $(function(){ $('#exebtn').click(function() { $.ajax({ type: "post", url : "sendmail.php", data : { message: $('#message').val(), exebtn:$('#exebtn').val()}, datatype:'text', success: function(data) { if(data != ''){ alert(data); }}, }); }); }); //]]> </script> </head> <body> <MTEntries> <form id="link" method="POST"> <input id="message" type="hidden" name="message" value="<$MTEntryTitle$>"/> <input id="exebtn" type="button" name="exebtn" value="リンク切れ"/> </form> </MTEntries> </body> </html> ----------------------------------------- ---- sendmail.php -------------------- <?php header('Content-Type: text/plain; charset=UTF-8'); $off=$_POST["exebtn"]; $message=$_POST["message"]; if ($off != ""){ $to = "hogehoge@hoge.jp"; $from = "hoge1@hoge.com"; $header = "From: $from\n"; $subject = "報告"; $subject = mb_convert_encoding($subject,"JIS","utf-8"); $message = mb_convert_encoding($message,"JIS","utf-8"); $ret = mb_send_mail($to,$subject,$message,$header); if($ret){ $msg = '送信しました'; }else{ $msg = '送信失敗しました'; } } echo $msg; ?> --------------------------------------------- ご教授、宜しくお願い致します。

  • 値を取得できない

    var hoge = {   piyo: {     bar = /* ここにhogehoge.fooの値を入れたい */   },   foo: "Hello, World!" } でhoge.piyo.barからhoge.fooの値を取得したいのですが、 hoge.fooとやってもthis.fooとやっても取得できません。 どうすれば取得できるのでしょうか?

  • イベントハンドラに処理を追加するには?

    例えばbodyタグのonloadイベントハンドラに JavaScriptを使って処理を追加するにはどうすればよいのでしょうか? 例) ・rei.htm <html>  <script language="JavaScript" type="text/javascript">  function hoge(){   alert("hogeです");  }  function foo(){   alert("fooです");  }  </script>  <body onload="hoge();">  </body>  <script language="JavaScript" type="text/javascript">  document.body.onload += foo();  </script> <html> ※前提条件として、変更可能な箇所はscriptタグ内のみとなります。 「こんなんでいけないかな?」と思って上記のようにやってみたのですがうまくいきませんでした。 (結果はfoo()のみ実行され、hoge()は実行されませんでした。 alertでbody.onloadの中身を確認すると『function anonymous{hoge();}undefined』と表示されるので、なぜfoo()が実行されてhoge()が実行されないのかよくわかりませんが‥) また試しに document.body.onload += foo(); これを以下のように変更してみました。 document.body.onload = foo(); この時は、 ・foo()の実行  ↓ ・javascriptエラー  ↓ ・hoge()の実行 となりました。(これもなぜこうなるのかよくわかりせん) 以上、イベントハンドラに最初から任意に入れられている処理を残しつつ、 さらに処理を加えるにはどうすればよいのかご教示お願いします。

  • jqueryのajaxに引数を指定

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

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

  • 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

  • jQuery $.ajax JSON形式のPOST

    jQuery $.ajax JSON形式のPOSTでフォーム内容を送信し、送信先のPHPでメール送信させるプログラムをかいているのですが、どうしても$.ajaxのerrorが呼び出される状況です。errorが呼び出されますが、PHPの方のメール送信はできております。 PHP側の出力がうまくいっていないのではないかと思いますが、原因がわかりません。どなたかご教授いただけないでしょうか?宜しくお願いします。 ---js--- $("#send").click(function(){ var NAME = $('#name').val(); var EMAIL = $('#email').val(); var TITLE = $('#titlel').val(); var COMMENT = $('#comment').val(); $.ajax({ url : "sendmail.php", dataType : "json", data : {name:NAME, email:EMAIL, title:TITLE, comment:COMMENT}, type : "post", success : function(data){ if(data != ''){ alert(data.result); } }, error : function(){ alert("通信に失敗しました。"); } }); }); ---sendmail.php--- if($_SERVER["REQUEST_METHOD"] != "POST"){ header("HTTP/1.0 404 Not Found"); return; }else{ //メール送信処理 (省略) $message = "送信完了メッセージ"; $result = array('result' => $message); echo json_encode($result); }

  • jQuery 階層セレクタとフォームセレクタの混在

    いつもお世話になります。 jQueryで、階層セレクタにフォームセレクタを使用すると、一部思うように動作しないセレクタがあります。動作しないのは、例えば以下のセレクタです。 HTML ------ <div id="div1"></div> <input type="hidden" name="hdn0" value="h1" /> <input type="hidden" name="hdn1" value="h2" /> ----- jQuery ----- $(function() { var obj = $("#div1"); alert($("~ input:hidden[name='hdn0']", obj).val()); alert($("~ input:hidden[name='hdn1']", obj).val()); }); ----- 上記のセレクタは、階層セレクタで 「prev ~ siblings」 のsiblingsを、フォームセレクタの:hiddenを指定しているのですが、この:hiddenが効いてないみたいなのです。 (:hiddenを外せばとれます) 自分なりに調べてみて、siblingsにはセレクタを指定することができると思っています。 しかしこの認識は間違っているのでしょうか。 宜しくお願いします。 jQuery:1.7.2 (https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.jsを使用)

新NISAの成長投資枠について
このQ&Aのポイント
  • 新NISAの成長投資枠についての疑問点
  • 新NISAの成長投資枠の上限枠と売却分の活用について
  • 暴落投資家の要望と積み立ての面倒さ
回答を見る

専門家に質問してみよう