ここから本文です

クリックイベントの前にajaxの処理を挟む方法はないでしょうか?

hog********さん

2020/2/2317:00:03

クリックイベントの前にajaxの処理を挟む方法はないでしょうか?

バブリングしても駄目でjqueryの処理が先に呼ばれました。

$(document).on('click', ".hoge span", function(){
var obj = $(this);
$.ajax(
// dbからデータを取得
obj.parent().data('hoge',data.param);
);
});

// 他の場所でも使っているので、大きくは変更できない
$(document).on('click', ".hoge", function(){
// ajaxで取得したデータを使いたいけど、使えない
var data = $(this).data('hoge');
});

閲覧数:
20
回答数:
3

違反報告

回答

1〜3件/3件中

並び替え:回答日時の
新しい順
|古い順

プロフィール画像

カテゴリマスター

dot********さん

2020/2/2421:38:09

えーと、

おやりになりたいことを整理しますと、
・要素クリックで、Ajaxで値を取得、その要素の属性"data-hoge"の値に反映させ、
同じく
・要素クリックで、その"data-hoge"の値を使ってうんちゃらしようとしたら、
・その時点で"data-hoge"が存在しない、または値が入っていない。

ということですよね。
イベントハンドラが別々、かつ両方とも非同期なので仕方ないですね。あとの処理が先に走っている。

方法としては、後のAjaxリクエストを、先のAjaxコールバックで打てば問題ないのですが、やや下品な処理になって、エラー処理とかが複雑になるので、今風に"promise"を使うのが正しいように思います。

https://qiita.com/Tomonobu3110/items/53a76f7cc3a01735e9bd

スッキリして美しいです。

nic********さん

2020/2/2400:34:30

クリックイベントで「Ajaxでデータを取得し、それを使う」ようなコードを書けばいい。
jQuery.ajax()は非同期、つまり「そのうち通信するからとりあえず置いといて」って処理なわけだが、その代わりに「通信が終わったら何をするか」を指定しておくことができる。
http://js.studio-kingdom.com/jquery/ajax/ajax
complete に関数を渡してもいいし、ドットで繋げてdone()を書いても同じだ。

というか、前述のように、jQuery.ajax()を先に呼び出しても、通信が先に完了するかは分からない。Ajax通信には数十msはかかるから、普通にクリックの「後」に処理を読んでも、通信結果は返ってくる前だ。

この辺は通信を伴うコードを書くなら必須の知識なので覚えろ。XHR, fetchなど、通信をする方法はいくつかあるが、どれを採用するにしても考え方は同じなので、この考え方や設計は身に付けないと話にならない。

kak********さん

2020/2/2318:11:49

ドキュメントのロード時にajaxでデータを取得しておく方法はできませんか?

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる