質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

4359閲覧

動的に生成された複数の要素に、生成されたタイミングで処理を行いたい

huwatoro

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/05/11 04:59

編集2019/05/11 05:01

実現したいこと

Ajaxで動的に生成した<button>に対して、そのdata-nameに応じたテキストを挿入したいです。

たとえばこちらの<butotn>が生成されるのですが、

<button data-name="<!--いろんな値-->" type="button"><!--空っぽ--></button>

この「空っぽ」の部分に「いろんな値」に応じたテキストを、jQueryで挿入したいという感じです。

発生している問題

下記の【check.php】【ajax.js】【ajax.php】という流れで、Ajax後に<butotn>が生成されるのですが、その<butotn>のテキストが「試したこと」のjQueryでは挿入できません。

該当のソースコード

まず下記がボタンを生成する前のHTMLです。
後述のAjaxでは、このvalueに応じたdata-nameを持つ<button>を、チェックボックスの下に生成します。

【check.php】

<input type="checkbox" value="jon"> <!-- ここに<button>が生成される --> <input type="checkbox" value="kelly"> <!-- ここに<button>が生成される -->

そして下記が<button>を生成するajaxです。

【ajax.js】

jQuery

1$(document).on('change','input', function(){ 2 var this = $(this) 3 var checkedVal = this.val(); 4 $.ajax({ 5 url: "ajax.php", 6 type: 'POST', 7 data: { 8 checkedVal: checkedVal, 9 } 10 cache: false, 11 success: function(button){ 12 this.after(button); 13 }, 14 error: function(xhr, textStatus, errorThrown){ 15 alert('Error! ' + textStatus + ' ' + errorThrown); 16 } 17 }); 18});

さいごに下記がajaxで読まれるPHPです。

これが生成する<button>は事情によってテキストが空っぽになっています。

なので、この<button>の生成後に、data-nameに応じてテキストを挿入したいというのが実現したいことになります。

【ajax.php】

php

1$checkedVal = $_POST['checkedVal']; 2echo '<button data-name="'.$checkedVal.'" type="button"><!--空っぽ--></button>';

試したこと

まず「.each」が使えるかと思って下記のように試したのですが、動的に追加された要素には通用しないみたいでした。

jQuery

1$(document).on("each", "button", function(){ 2 var name = $(this).attr("data-name"); 3 if( name=='jon' ){ 4 $(this).text('男性'); 5 } 6 else if( name=='kelly' ){ 7 $(this).text('女性'); 8 } 9});

もちろん、【ajax.js】のsuccessの中に上の$(this).text('男性');とかを書けばいい話ではあります。

しかしそれよりも、動的に追加された要素に「.each」を効かせるような方法があればもっと手っ取り早いと感じたので、そのような方向で質問させて頂きました。

何か不足した情報などございましたら随時ご指摘ください。

質問は以上になります。どうぞご指導宜しくお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/05/11 07:04

これ、動作します……?
Lhankor_Mhy

2019/05/11 07:52

this は予約語だから、$thisとかにしないとまともに動かないブラウザもあるんじゃないかなあ……?
guest

回答3

0

ベストアンサー

jqueryメソッドを拡張ちて、カスタムイベントを登録したでちゅ。

js

1(function() 2{ 3 // ajaxエミュレーション用データ 4 var idx = 0; 5 var key = ["aaa", "bbb", "ccc", "ddd", "eee"]; 6 7 $(document).ready(function() 8 { 9 // buttonにカスタムイベントコールバックを定義するのでちゅ。 10 $(document).bind("custom-append", "button", function(e) 11 { 12 $(e.data).text( $(e.data).attr("data-name") ); 13 }); 14 // jQueryメソッドの拡張 15 var jquery_original_after = $.fn.after; 16 $.fn.after = function() 17 { 18 // jQueryのafterメソッドを使うと、custom-appendイベントが発生するのでちゅ。 19 return jquery_original_after.apply(this, arguments).trigger("custom-append"); 20 }; 21 22 23 // チェックボックスイベントコールバック 24 $(document).on("change", "input[type=checkbox]", function() 25 { 26 if(!$(this).prop("checked")) 27 { 28 $(this).siblings("button").remove(); 29 return true; 30 } 31 32 // 以下、ajaxをエミュレート 33 var self = $(this); 34 setTimeout(function() 35 { 36 var button = $("<button/>").attr("type", "button").attr("data-name", key[idx++]); 37 self.after(button); 38 idx %= key.length; 39 }, 1000); 40 }); 41 }); 42})();

投稿2019/05/11 07:47

編集2019/05/11 07:48
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/05/11 07:51 編集

他のコードがjQueryを使っているのに、一部だけネイティブのJavaScriptで実装はしたくないと思ったのでちゅ。
huwatoro

2019/05/11 23:00

ありがとうございます。こんなことができるんですね。完全に新しいアイディアでした。
guest

0

こんにちは

ご質問にある要件を満たす方法として、指定したコールバックを DOM の変更時に実行させる、 MutationObserver を使ってみる、というのが考えられます。

以下、その使用例のサンプルです。

追加される複数のボタン全体を囲む <div> を以下のように用意しておきます。

html

1<div id="buttons-area"></div>

次に、上記の#buttons-areaの子ノードを検知するように、MutationObserverを設定する関数を以下

javascript

1const setupObserver = function() { 2 3 const callback = function(mutationsList, observer) { 4 for(var mutation of mutationsList) { 5 if (mutation.type == 'childList') { 6 const button = $(mutation.addedNodes[0]); 7 button.text(button.data('name')); 8 } 9 } 10 }; 11 const observer = new MutationObserver(callback); 12 13 const targetNode = document.getElementById('buttons-area'); 14 15 observer.observe(targetNode, { childList: true }); 16};

のように作っておき、これをdocument が readyになったときに使います。

javascript

1 2$(function() { 3 4 setupObserver(); 5 6 // ・・・ 7 8});

以下は、上記のサンプルです。

このサンプルは以下のように動作します。

  • チェックボックスをチェックすると、 AJAXでリクエストを送ります。(チェックを外すときはリクエストされません)
  • 疑似APIっぽく見せるために、レスポンスが返されるまでに約1秒、遅延するようにしています。
  • レスポンスは以下のようなHTMLです。

html

1<button data-name="PAVCJNVQ" type="button"><!--空っぽ--></button>
  • 上記で、data-name 属性の値は、リクエストごとに生成されるランダムな英数字8文字の文字列になります。
  • AJAXのsuccess時のハンドラでは、このHTMLから作られる、テキストが空のボタンを#buttons-areaに追加します。
  • ボタンが追加されると、MutationObserverに設定されたコールバックが呼ばれて、以下の処理

javascript

1 const button = $(mutation.addedNodes[0]); 2 button.text(button.data('name'));

が行われ、ボタンのテキストが data-name属性の値に変更されます。

以下の画像は、チェックボックスをチェックする、外すという操作を繰り返して、3回AJAXでリクエストを送信した後に表示されるボタンと、console です。

イメージ説明

consoleには、各AJAXによるリクエストで返されるレスポンスHTMLが表示されています。

以上、MutationObserver をお使いになってみてはいかがでしょう、というご提案の回答になります。
参考になれば幸いです。

投稿2019/05/11 07:00

jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

huwatoro

2019/05/11 23:04

きめ細やかなご説明に感謝いたします。大変わかりやすく今後とも参考にさせて頂きたいコードでした。
jun68ykt

2019/05/11 23:53

どういたしまして。解決されたようで、よかったです????
guest

0

別の質問に回答した通り $('button').each() で処理すればOKでしょう。
https://teratail.com/questions/188785#reply-280264

ご記載の方法だと、documentのeachイベントの発火を待つ意味になります。そんなイベントは起きないので動きません。

投稿2019/05/11 05:28

iwamot

総合スコア1154

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

huwatoro

2019/05/11 05:38

それだとAjaxのタイミングとあわないのでは?
iwamot

2019/05/11 05:48

success時のコールバック関数内で処理すればよいと思います。
huwatoro

2019/05/11 06:00

あの、それはしたくないという前提で質問させて頂いてますので…
iwamot

2019/05/11 06:08

質問からはそこまで読み取れませんでした。それであればDOM変更イベントを検知して、そこで処理する案が考えられます。あとは他の回答者におまかせします。
huwatoro

2019/05/11 06:18 編集

なるほど。たしかに質問が悪かったです。たびたびありがとうございました。
iwamot

2019/05/12 02:57

「【ajax.js】のsuccessの中に上の$(this).text('男性');とかを書けばいい話ではあります」と最初から書かれていたんですね。見落としていました。申し訳ありません。 それはそれとして、ぼくには、success時のコールバック関数内で処理するのがもっとも「手っ取り早い」ようにみえます。他の方法は必要以上に計算量やコード量が増え、パフォーマンスや保守性の低下が懸念されます。もしぼくの同僚がこんなコードを書いていたら、レビューで「やめたほうがいい」と指摘するでしょう。
iwamot

2019/05/12 03:27 編集

あ、そもそもすべてのボタンを処理対象にする必要もないので、$(button) でボタンエレメントを生成し、テキストを設定して、DOMに追加するだけで済ませるように伝えます。
iwamot

2019/05/12 03:40

質問の一部を読み落としていたのだから低評価は自業自得だとは思うけれど、やりたいことそのものの方向性がおかしいという指摘を真面目にしても閲覧者に伝わらないのだとしたら、ただただ虚しいなあ。今後、こういう質問には答えないようにします。
退会済みユーザー

退会済みユーザー

2019/05/12 07:12 編集

いいわけは、かっこ悪いでちゅ。 いわもとしゃんは、今、ものすごーく、かっこ悪いでちゅ。
iwamot

2019/05/12 08:59

looperしゃんのコードも、ものすごーく、かっこ悪いでちゅよ。
iwamot

2019/05/12 09:23

afterにこんなもの仕込まれてたら迷惑じゃん。パフォーマンスや保守性が下がるのは事実だし、マジでこんなコードが適切だとでも思ってんの?
iwamot

2019/05/12 09:43

パフォーマンスや保守性を下げるデメリットに触れず、おもしろい手段を思いついたから書いただけの回答のどこがかっこいいんだよ。自分だって低評価くらいまくりのくせに。偉そうに。
iwamot

2019/05/12 09:45

そもそも「でちゅ」はかっこいいのか? 他人のマンガのキャラクターを勝手に使ってさ。まあユニークだこと。
iwamot

2019/05/12 09:52

まあ、こんな輩からかっこいいと思われても迷惑だな。今後も、そのユニークなユーモアセンスと実装センスで回答していけばいいんじゃない。教えられる側はかわいそうだけど。
退会済みユーザー

退会済みユーザー

2019/05/12 10:43

>自分だって低評価くらいまくりのくせに。偉そうに。 うふふふふ、荒れ狂って、みっともないでちゅねぇ。 そんなに低評価をもらったのがくやちかったんでちゅか? かわいいでちゅねぇ。
退会済みユーザー

退会済みユーザー

2019/05/12 10:45

大人なんだから、結果が全てだという事を、 いい加減に理解ちた方が良いとおもうでちゅ。 いわもとしゃんの回答は低評価、それが全てなのでちゅ。
iwamot

2019/05/12 10:46

お、出たなユーモアマン。おまえもかわいいよ。
退会済みユーザー

退会済みユーザー

2019/05/12 10:47

もちろん、ぽっくんはかわいいでちゅよ。 それがどうかちまちたか?
退会済みユーザー

退会済みユーザー

2019/05/12 10:48

いわもとしゃんは、いい加減に、ぢぶんの回答が浅はかだった事を認めたほうがいいと思うでちゅ。 きじゅぐちから血がでまくってるのに、わじゃわじゃぢぶんできじゅぐちを広げることはないでちゅ。
退会済みユーザー

退会済みユーザー

2019/05/12 10:50

いわもとしゃんがした最大の間違いは、 「質問者が幼稚で俺様が正しい」と決めつけた事でちゅ。 質問者しゃんを見下したその傲慢な態度そのものが、低評価なのでちゅよ。
iwamot

2019/05/12 10:50

さすが、返しもユーモア満点だな。
iwamot

2019/05/12 10:51

低評価は自業自得だって書いてるじゃん。
退会済みユーザー

退会済みユーザー

2019/05/12 10:52

書いているけど反省ちていないから、 そうやって無様な醜態をさらしまくっているのでちゅよね? いわもとしゃんは、かっこ悪いでちゅねぇ。
退会済みユーザー

退会済みユーザー

2019/05/12 10:52

もう一回いいまちゅが、 いわもとしゃんは、傲慢だからいけないのでちゅ。
退会済みユーザー

退会済みユーザー

2019/05/12 10:53

ぽっくんも、低評価、つけちゃおっかなぁー。
iwamot

2019/05/12 10:54

さすが、ゴーマニズム宣言の作者のマンガを勝手にパクっているだけのことはあるな。
iwamot

2019/05/12 10:56

ふーん、低評価を食らったら反省しないといけないのか。ご自身はさぞかししてるんでしょうね。
退会済みユーザー

退会済みユーザー

2019/05/12 10:58

うふふふ、まるで駄々っ子のようにふてくされていまちゅねぇ。 おやぢにもぶたれた事がなかったでちゅか?
iwamot

2019/05/12 11:00

ないねえ。
退会済みユーザー

退会済みユーザー

2019/05/12 11:01

だからいい大人なのにそんな子供みたいに荒れ狂っているのでちゅねぇ。 いわもとしゃんは、あまやかしゃれて育ったんでちゅねぇ。
iwamot

2019/05/12 11:02

そうかもね。
退会済みユーザー

退会済みユーザー

2019/05/12 11:59 編集

いわもとしゃんは、質問者しゃんが「MutationObserver」や「カスタムイベント」や「jQueryの$.fnの利用」といった様々なちちきを学習しゅる機会を、くだらない自尊心を理由に奪おうとちていたんでちゅよ。 もうちょっと反省ちたほうがいいと思いまちゅ。
iwamot

2019/05/12 11:04

パフォーマンスや保守性についても勉強したほうがいいんじゃないの。
iwamot

2019/05/12 11:04

ちょっとは触れてあげたらいいじゃん。かわいそうに。
退会済みユーザー

退会済みユーザー

2019/05/12 11:07

ふれなくても、ぢぶんで解決できる事は、質問者しゃんが考えるべきでちゅ。 それでわからなかったらまた聞きにくればいいでちゅ。 それに、いわもとしゃんが言っているパフォーマンスだの保守性うんぬんは、 いわもとしゃんが何も分かっていないだけでちゅね。
退会済みユーザー

退会済みユーザー

2019/05/12 11:07

あと、ぽっくんがいわもとしゃんに低評価をつけないのは、 ぽっくんの寛大な慈悲によるものでちゅからね。 もうちょっと感謝ちてほちいもんでちゅ。
退会済みユーザー

退会済みユーザー

2019/05/12 11:07

いわもとしゃんは、低評価がつくと荒れ狂う病のようでちゅので、 がまんちてあげているのでちゅよ。
iwamot

2019/05/12 11:10

少なくとも計算量は増えるじゃん。速くなるわけがない。
iwamot

2019/05/12 11:13

afterがいじられてるなんて想定は普通しないから、コードリーディングの手間だって増える。
iwamot

2019/05/12 11:14

それに触れてあげたほうが親切だと俺は思ってるだけで、おまえがそう思わないなら別にいいよ。不親切な奴だな、と思うだけ。
退会済みユーザー

退会済みユーザー

2019/05/12 11:15

あいかわらじゅ、寝ぼけた事言っていまちゅねぇ…。 多分、いわもとしゃんは手段が目的化ちてちまう人なので、 コードを書くことこそが仕事だと思っているでちゅね。 で、怒りで目が見えなくなっているので、書いてあるコードそのものちか見えなくなっているでちゅ。
iwamot

2019/05/12 11:16

あっそ。
退会済みユーザー

退会済みユーザー

2019/05/12 11:18

多分でちゅが、いわもとしゃんはシベリア鉄道のモスクワ行きの列車の先頭に身体をくくりつけて 時速120Km/hで全9,297Kmを走り抜けてもらったらいいと思うでちゅ。 そうすればその沸騰しまくった頭も少しは冷めると思うでちゅ。
iwamot

2019/05/12 11:19

ユーモアがすごいな。
iwamot

2019/05/12 11:21

おやじにぶたれてたらこんな面白人間に俺もなれてたのかな。死んだからもう無理だけど。
退会済みユーザー

退会済みユーザー

2019/05/12 11:22

いわもとしゃん、素朴なしちゅもんなのでちゅが、 そんなに怒ったらちゅかれまちぇんか? 無駄な体力をちゅかう気持ちは、どうでちゅか?
退会済みユーザー

退会済みユーザー

2019/05/12 11:22

おとなちく反省した方がいいと思いまちゅけどねぇ。
iwamot

2019/05/12 11:23

いや、炎上は何度も経験してるから、別に疲れないよ。体力なんか使うかね。
退会済みユーザー

退会済みユーザー

2019/05/12 11:25

炎上は何度も経験ちているのに、 じゅいぶんみっともなく荒れ狂っていまちゅねぇ。
退会済みユーザー

退会済みユーザー

2019/05/12 11:25

シベリア鉄道にくくりつけてもらうかは別とちて、 冷静になってこのやり取りを見かえちたら、いわもとしゃん程度では顔が真っ赤になるんじゃないでちゅか?
iwamot

2019/05/12 11:27

別にみっともないと思ってないからねえ。ちなみにlooperしゃんは親父にぶたれまくって育ったの?
退会済みユーザー

退会済みユーザー

2019/05/12 11:28

ぽっくんはおとうしゃんの顔はしらないでちゅ。生まれたときからおかあしゃんしかいなかったでちゅ。
退会済みユーザー

退会済みユーザー

2019/05/12 11:30

おとうしゃんに甘やかされて育ったいわもとしゃんは、しあわちぇものでちゅねぇ。
退会済みユーザー

退会済みユーザー

2019/05/12 11:31

おとうしゃんはいわもとしゃんを甘やかしてくれたのに、いわもとしゃんは質問者しゃんを随分と邪険に扱うのでちゅねぇ。
iwamot

2019/05/12 11:32

そっか。ごめんね。うちは去年死んだんだよ。色々あるわな。
iwamot

2019/05/12 11:32

ぶたれてないってことは甘やかされたってことなのかな。自分じゃよくわからないや。
退会済みユーザー

退会済みユーザー

2019/05/12 11:33

もちろん、嘘でちゅ。
iwamot

2019/05/12 11:33

なんだよ。ひどいなあ。
退会済みユーザー

退会済みユーザー

2019/05/12 11:38

いわもとしゃんは、おとうしゃんに笑われないような言動をちたほうが良いとおもいまちゅ。 なんどもいいまちゅが、いいわけはみっともないでちゅよ。 あと、傲慢も。 ぎじゅつしゃは、我儘でもいいけれど傲慢はダメで、常に謙虚でなければならないでちゅ。
iwamot

2019/05/12 11:41

父は死んだんだよ。生育環境について軽々しく嘘をつける人に、ああだこうだ言われる筋合いはないと思うけどな。ちょっともうこれ以上のやりとりは無理だ。ごめん。
退会済みユーザー

退会済みユーザー

2019/05/12 11:47

おちゅかれしゃまでちゅー。
退会済みユーザー

退会済みユーザー

2019/05/12 12:19

いっこ言いわちゅれたでちゅ。 ぢぶんで勝手に怒りに任せて >別にみっともないと思ってないからねえ。ちなみにlooperしゃんは親父にぶたれまくって育ったの? みたいに悪意を持って父親の話をちたくしぇに、それを返されたら腹を立てるとか、 ぽっくんから見てもお子しゃますぎまちゅ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問