jqueryでajaxsuccessの内側this

このQ&Aのポイント
  • 期待する動作とは異なり、ajaxのsuccess内で$(this)にアクセスする方法がわかりません。
  • $(this).val()を呼び出すとエラー「e.nodeName is undefined」となります。
  • 他の方法ではなく、success内で$(this)にアクセスする方法を知りたいです。
回答を見る
  • ベストアンサー

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>

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

  • ベストアンサー
  • pQ2MZc53
  • ベストアンサー率12% (1/8)
回答No.1

$(document).ready(function() {     $('.hoge').click(function(){         // 変数に代入         var obj = $(this);         $.ajax({             url: "some.html",             cache: false,             success: function(){                 alert( obj.val() );                 obj.css('background-color','red');             }         });     }); });

susan-styl
質問者

お礼

ありがとうございます!! 無事、期待の動作になりました! thisのオブジェクトを変数に代入すればいいんですね。 本当にありがとうございます

関連するQ&A

  • jQuery.msgBoxでのthisの使用につい

    jQuery(v1.3.2), jQuery.msgBox( http://jquerymsgbox.ibrahimkalyoncu.com/ ) v0.9を使用して、スクリプトを書いています。以下の様なコードなのですが、期待した動作にならないため、誤りなど指摘していただければ幸いです。 ----------------- $('.target').click(function(){ $.msgBox({ title: 'title', content: 'content', type: 'confirm', buttons: [{ value: 'yes' }, { value: 'no' }, { value: 'cancel' }], success: function (result) { if (result == 'yes') { $.post( '//***.php', { key: 'val' }, function(data){ if ( data.indexOf('success') !== -1 ) { $(this).addClass('success').css({'background-color':'#FF6600'}); } } ); } } }); }); ------------------ 流れとしては、 1.class="target"であるいくつかの要素のうち、いずれかをクリック 2.msgBoxでダイアログボックスを表示し、動作を継続するか確認 3.$.postを用いて、クリックした要素に含まれる情報を処理用phpに投げる 4.処理用のphpは動作が正常に終了すると"success"を出力、これをjsで取得して判定 5.phpが動作を正常に終了したら、クリックした要素だけにclassを追加、スタイル変更 としたいです。 現在4番までは動作確認が取れ、phpの処理および判定(alertで確認)は成功しているのですが、最後の5番のみがうまくいきません。恐らくthisがうまく動作していないものと考えられますが、jQueryはあまり経験がないので原因が特定出来ません。 どうかよろしくお願い致します。

  • jQueryのthisの使い方

    javascript初心者なので根本的に勘違いしていたらすいません。 jQueryを使ってAAというclass領域をポイントしたら同じAAのclassを設定されているすべてのCSSをかきかえる、ということをしたいです。 $(document).ready(function(){ $(".AA").hover( function () { $(this).css('color', '#000000'); }, function(){ $(this).css('color', '#222222'); } ); }); ここまでは書いたのですが、ポイントしているところだけしか変わらないので、ページ内のすべての同じクラスに結果が反映されるようにしたいのですが書き方がそもそも間違ってるんでしょうか…。

  • jquery $(this)をoff()したい

    バージョンを1.7から1.9に変更し、live,dieの代わりにon,offを使用するようにしました。 一度だけ実行したいイベントがあり、今までliveでは、そのまま$(this).die('click');としていました。 具体的には下記のようなコードになります。 これまでliveで $('.hoge a').live('click', function(){ $(this).die('click'); }); のように書いていたものを $(document).on('click', '.hoge a', function(){ $(this).off('click'); }); というように書き直しました。 しかしこの書き方では思うような動作にならず $(document).off('click', this); $(document).off('click', $(this)); $(document).off('click', '.hoge a'); //.hoge aのイベントが全部削除されてしまう $('.hoge').off('click', 'a'); など色々試しましたが期待通りの動作をしません。 ・live,dieをon,offに変更 ・クリックされた要素からイベントを削除していく(一回だけ実行したい) ・クリックされた要素”のみ”イベントを削除したい どのようにすればよいでしょうか。 よろしくお願いします。

  • 【jQuery】 changeが検出できない

    間違いがあったため、投稿しなおしです。 MySQL + PHP + javascript with jQuery でプログラムを作成しています。 $.ajaxでPHPを呼び出し、以下のようなinputを書き出しました。 <input id="hoge" onchange="alert('hogehoge')" type="hidden" value="foo" / > その後、以下のようにjsで値の変更を行いましたが、changeイベントが検出できません。 $("#hoge").val("hogehoge");//アラートが出ない 変更後、すぐにアラートが出るようなイメージでいたのですが、アラート自体が出ません・・・ inputに直にonchangeを書いているのがマズイのかな、と思い、以下のように変更もしてみましたが、やはりダメでした。 $("#hoge").livequery("change",function(){ alert("hogehoge"); }); $("#hoge").val("hogehoge");//やはりアラートが出ない プログラムから変更されたval()は、イベントとして取得できないのでしょうか。 なぜ取得できないのか、またそもそも出来ないのなら何か方法はないか、ご存じの方お願い致します。

  • phpのthis

    a.phpを作成しました。 thisによるアクセスが可能かと思ったのですが、やはりできないのでしょうか。 ===a.php==== <?php $val = 1 ; method(); function method(){ echo $val; echo $this -> val; } ?> ===a.phpここまで===== 別のphpファイル(try.php)には以下内容を記述しました。 ===try.php=== <?php class User { private $id; public function get_id(){ return $this->id;} } public function set_id($id){ $this->id=$id; } ?> 質問: なぜ、 「try.phpでは、$idにthisでアクセスできるのでしょうか? (returnの違いかと思いましたが、set関数はreturnがないのでretrunでもないと思っています。) a.phpでは、thisで valにアクセスできないのでしょうか?」 try.phpは、classを付けてクラス作成しているから、$idにthisでアクセスできるのでしょうか? ご教授お願いします。

    • ベストアンサー
    • PHP
  • jQueryで合計を出したい

    <table> <tr> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> </tr> </table> とHTMLで記述していて、jQueryを下記のように記述しました。 var total; j$(".point:text").change(function(){ j$(".point:text").each(function(){ var point = j$(this).val(); total = parseInt(point)+total; }); alert(total); }); alertで返ってくる結果が「NaN」となります。 どのようにすれば合計値が求められるでしょうか。 やりたいことは「pointクラス」内のテキストフォームの値を合計したいです。

  • 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のセレクタ範囲について

    お世話になります。 【Jquery】 $("#aaa").click(function(){ $(this).css("opacity","1"); }); 【HTML】 <div id="aaa"> <p>hogehoge</p> <p>hogehoge</p> <input type="text" name="hoge"> </div> <div id="aaa"> <p>hoge2hoge2</p> <p>hoge2hoge2</p> <input type="text" name="hoge2"> </div> 上記の2つのdivでそれぞれのdiv内をクリックするれば、そのdiv内のみCSSが適用されるのですが、inputをおした時は発火しないようにすることはできますでしょうか? $("#aaa").not(":input") としてみたのですが、$(this)の値が変わるためDIVが変化しなくなりました。 反対に「$(this).css」を「 $("div#aaa").css」にすると2つのDIVに同時に適用されてしまいます。 何か良い方法がありましたらよろしくお願い致します。 ※子要素であれば$(this)の下に「.find('input~)」と加えて行けばいいと思うのですか上に遡るにはどのような方法がよいのでしょうか?

    • ベストアンサー
    • PHP
  • 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

    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

専門家に質問してみよう