Q&A
これ、動作します……？
実現したいこと
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」を効かせるような方法があればもっと手っ取り早いと感じたので、そのような方向で質問させて頂きました。
何か不足した情報などございましたら随時ご指摘ください。
質問は以上になります。どうぞご指導宜しくお願い申し上げます。
this は予約語だから、$thisとかにしないとまともに動かないブラウザもあるんじゃないかなあ……？
回答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
他のコードがjQueryを使っているのに、一部だけネイティブのJavaScriptで実装はしたくないと思ったのでちゅ。
ありがとうございます。こんなことができるんですね。完全に新しいアイディアでした。
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});
以下は、上記のサンプルです。
- 動作確認用サンプル： https://jsfiddle.net/jun68ykt/9amtjyf7/6/
このサンプルは以下のように動作します。
- チェックボックスをチェックすると、 AJAXでリクエストを送ります。（チェックを外すときはリクエストされません）
- 疑似APIっぽく見せるために、レスポンスが返されるまでに約１秒、遅延するようにしています。
- レスポンスは以下のようなHTMLです。
html
1<button data-name="PAVCJNVQ" type="button"><!--空っぽ--></button>
- 上記で、
data-name属性の値は、リクエストごとに生成されるランダムな英数字８文字の文字列になります。 - AJAXのsuccess時のハンドラでは、このHTMLから作られる、テキストが空のボタンを
#buttons-areaに追加します。 - ボタンが追加されると、
MutationObserverに設定されたコールバックが呼ばれて、以下の処理
javascript
1 const button = $(mutation.addedNodes[0]); 2 button.text(button.data('name'));
が行われ、ボタンのテキストが data-name属性の値に変更されます。
以下の画像は、チェックボックスをチェックする、外すという操作を繰り返して、３回AJAXでリクエストを送信した後に表示されるボタンと、console です。
consoleには、各AJAXによるリクエストで返されるレスポンスHTMLが表示されています。
以上、MutationObserver をお使いになってみてはいかがでしょう、というご提案の回答になります。
参考になれば幸いです。
投稿2019/05/11 07:00
総合スコア9058
0
別の質問に回答した通り $('button').each() で処理すればOKでしょう。
https://teratail.com/questions/188785#reply-280264
ご記載の方法だと、documentのeachイベントの発火を待つ意味になります。そんなイベントは起きないので動きません。
投稿2019/05/11 05:28
退会済みユーザー
総合スコア0
それだとAjaxのタイミングとあわないのでは？
success時のコールバック関数内で処理すればよいと思います。
あの、それはしたくないという前提で質問させて頂いてますので…
質問からはそこまで読み取れませんでした。それであればDOM変更イベントを検知して、そこで処理する案が考えられます。あとは他の回答者におまかせします。
なるほど。たしかに質問が悪かったです。たびたびありがとうございました。
「【ajax.js】のsuccessの中に上の$(this).text('男性');とかを書けばいい話ではあります」と最初から書かれていたんですね。見落としていました。申し訳ありません。
それはそれとして、ぼくには、success時のコールバック関数内で処理するのがもっとも「手っ取り早い」ようにみえます。他の方法は必要以上に計算量やコード量が増え、パフォーマンスや保守性の低下が懸念されます。もしぼくの同僚がこんなコードを書いていたら、レビューで「やめたほうがいい」と指摘するでしょう。
あ、そもそもすべてのボタンを処理対象にする必要もないので、$(button) でボタンエレメントを生成し、テキストを設定して、DOMに追加するだけで済ませるように伝えます。
質問の一部を読み落としていたのだから低評価は自業自得だとは思うけれど、やりたいことそのものの方向性がおかしいという指摘を真面目にしても閲覧者に伝わらないのだとしたら、ただただ虚しいなあ。今後、こういう質問には答えないようにします。
いいわけは、かっこ悪いでちゅ。
いわもとしゃんは、今、ものすごーく、かっこ悪いでちゅ。
looperしゃんのコードも、ものすごーく、かっこ悪いでちゅよ。
afterにこんなもの仕込まれてたら迷惑じゃん。パフォーマンスや保守性が下がるのは事実だし、マジでこんなコードが適切だとでも思ってんの？
パフォーマンスや保守性を下げるデメリットに触れず、おもしろい手段を思いついたから書いただけの回答のどこがかっこいいんだよ。自分だって低評価くらいまくりのくせに。偉そうに。
そもそも「でちゅ」はかっこいいのか？ 他人のマンガのキャラクターを勝手に使ってさ。まあユニークだこと。
まあ、こんな輩からかっこいいと思われても迷惑だな。今後も、そのユニークなユーモアセンスと実装センスで回答していけばいいんじゃない。教えられる側はかわいそうだけど。
>自分だって低評価くらいまくりのくせに。偉そうに。
うふふふふ、荒れ狂って、みっともないでちゅねぇ。
そんなに低評価をもらったのがくやちかったんでちゅか？
かわいいでちゅねぇ。
大人なんだから、結果が全てだという事を、
いい加減に理解ちた方が良いとおもうでちゅ。
いわもとしゃんの回答は低評価、それが全てなのでちゅ。
お、出たなユーモアマン。おまえもかわいいよ。
もちろん、ぽっくんはかわいいでちゅよ。
それがどうかちまちたか？
いわもとしゃんは、いい加減に、ぢぶんの回答が浅はかだった事を認めたほうがいいと思うでちゅ。
きじゅぐちから血がでまくってるのに、わじゃわじゃぢぶんできじゅぐちを広げることはないでちゅ。
いわもとしゃんがした最大の間違いは、
「質問者が幼稚で俺様が正しい」と決めつけた事でちゅ。
質問者しゃんを見下したその傲慢な態度そのものが、低評価なのでちゅよ。
さすが、返しもユーモア満点だな。
低評価は自業自得だって書いてるじゃん。
書いているけど反省ちていないから、
そうやって無様な醜態をさらしまくっているのでちゅよね？
いわもとしゃんは、かっこ悪いでちゅねぇ。
もう一回いいまちゅが、
いわもとしゃんは、傲慢だからいけないのでちゅ。
ぽっくんも、低評価、つけちゃおっかなぁー。
さすが、ゴーマニズム宣言の作者のマンガを勝手にパクっているだけのことはあるな。
ふーん、低評価を食らったら反省しないといけないのか。ご自身はさぞかししてるんでしょうね。
うふふふ、まるで駄々っ子のようにふてくされていまちゅねぇ。
おやぢにもぶたれた事がなかったでちゅか？
ないねえ。
だからいい大人なのにそんな子供みたいに荒れ狂っているのでちゅねぇ。
いわもとしゃんは、あまやかしゃれて育ったんでちゅねぇ。
そうかもね。
いわもとしゃんは、質問者しゃんが「MutationObserver」や「カスタムイベント」や「jQueryの$.fnの利用」といった様々なちちきを学習しゅる機会を、くだらない自尊心を理由に奪おうとちていたんでちゅよ。
もうちょっと反省ちたほうがいいと思いまちゅ。
パフォーマンスや保守性についても勉強したほうがいいんじゃないの。
ちょっとは触れてあげたらいいじゃん。かわいそうに。
ふれなくても、ぢぶんで解決できる事は、質問者しゃんが考えるべきでちゅ。
それでわからなかったらまた聞きにくればいいでちゅ。
それに、いわもとしゃんが言っているパフォーマンスだの保守性うんぬんは、
いわもとしゃんが何も分かっていないだけでちゅね。
あと、ぽっくんがいわもとしゃんに低評価をつけないのは、
ぽっくんの寛大な慈悲によるものでちゅからね。
もうちょっと感謝ちてほちいもんでちゅ。
いわもとしゃんは、低評価がつくと荒れ狂う病のようでちゅので、
がまんちてあげているのでちゅよ。
少なくとも計算量は増えるじゃん。速くなるわけがない。
afterがいじられてるなんて想定は普通しないから、コードリーディングの手間だって増える。
それに触れてあげたほうが親切だと俺は思ってるだけで、おまえがそう思わないなら別にいいよ。不親切な奴だな、と思うだけ。
あいかわらじゅ、寝ぼけた事言っていまちゅねぇ…。
多分、いわもとしゃんは手段が目的化ちてちまう人なので、
コードを書くことこそが仕事だと思っているでちゅね。
で、怒りで目が見えなくなっているので、書いてあるコードそのものちか見えなくなっているでちゅ。
あっそ。
多分でちゅが、いわもとしゃんはシベリア鉄道のモスクワ行きの列車の先頭に身体をくくりつけて
時速120Km/hで全9,297Kmを走り抜けてもらったらいいと思うでちゅ。
そうすればその沸騰しまくった頭も少しは冷めると思うでちゅ。
ユーモアがすごいな。
おやじにぶたれてたらこんな面白人間に俺もなれてたのかな。死んだからもう無理だけど。
いわもとしゃん、素朴なしちゅもんなのでちゅが、
そんなに怒ったらちゅかれまちぇんか？
無駄な体力をちゅかう気持ちは、どうでちゅか？
おとなちく反省した方がいいと思いまちゅけどねぇ。
いや、炎上は何度も経験してるから、別に疲れないよ。体力なんか使うかね。
炎上は何度も経験ちているのに、
じゅいぶんみっともなく荒れ狂っていまちゅねぇ。
シベリア鉄道にくくりつけてもらうかは別とちて、
冷静になってこのやり取りを見かえちたら、いわもとしゃん程度では顔が真っ赤になるんじゃないでちゅか？
別にみっともないと思ってないからねえ。ちなみにlooperしゃんは親父にぶたれまくって育ったの？
ぽっくんはおとうしゃんの顔はしらないでちゅ。生まれたときからおかあしゃんしかいなかったでちゅ。
おとうしゃんに甘やかされて育ったいわもとしゃんは、しあわちぇものでちゅねぇ。
おとうしゃんはいわもとしゃんを甘やかしてくれたのに、いわもとしゃんは質問者しゃんを随分と邪険に扱うのでちゅねぇ。
そっか。ごめんね。うちは去年死んだんだよ。色々あるわな。
ぶたれてないってことは甘やかされたってことなのかな。自分じゃよくわからないや。
もちろん、嘘でちゅ。
なんだよ。ひどいなあ。
いわもとしゃんは、おとうしゃんに笑われないような言動をちたほうが良いとおもいまちゅ。
なんどもいいまちゅが、いいわけはみっともないでちゅよ。
あと、傲慢も。
ぎじゅつしゃは、我儘でもいいけれど傲慢はダメで、常に謙虚でなければならないでちゅ。
父は死んだんだよ。生育環境について軽々しく嘘をつける人に、ああだこうだ言われる筋合いはないと思うけどな。ちょっともうこれ以上のやりとりは無理だ。ごめん。
おちゅかれしゃまでちゅー。
いっこ言いわちゅれたでちゅ。
ぢぶんで勝手に怒りに任せて
>別にみっともないと思ってないからねえ。ちなみにlooperしゃんは親父にぶたれまくって育ったの？
みたいに悪意を持って父親の話をちたくしぇに、それを返されたら腹を立てるとか、
ぽっくんから見てもお子しゃますぎまちゅ。
あなたの回答
tips
プレビュー
