動的に生成したDOM要素に対してjQuery の「.each」は使えますか？

動的に生成したDOM要素に対して、「.each」のように「その全部に適用して」というのをやりたいのですが、方法はありますか？

つまり、

###「.click」の場合
たとえばこれは

jquery
1$(button).click(function(){
2    var name = $(this).attr('data-name');
3    $(this).html(name);
4});

こうして「.onバージョン」がありますよね。

jquery
1$(document).on("click", "button", function(){
2    var name = $(this).attr('data-name');
3    $(this).html(name);
4});

###「.each」の場合は？
ではこれはどうなのでしょうか？
「.onバージョン」はないのでしょうか？

jquery
1$("button").each( function() {
2    var name = $(this).attr('data-name');
3    $(this).html(name);
4});

###目的
この目的としては、Ajaxで
<button data-name="いろんな値" type="button">空っぽ</button>
というのが出力されるので、この「空っぽ」の部分に「いろんな値」を、JSで挿入したいという感じです。

m.ts10806

2019/05/11 00:50

動的要素の生成部分となんのどういうイベントで処理を行いたいかを記載してください

m.ts10806

2019/05/11 00:50

というか同じ内容を反映させるならeachしなくてもいいような。

huwatoro

2019/05/11 01:01 編集

>動的要素の生成部分となんのどういうイベントで処理を行いたいかを記載してください質問の最後に「目的」として書いておきました。伝わるでしょうか。 >というか同じ内容を反映させるならeachしなくてもいいような。わかりやすいようにコードを直しておきました。

m.ts10806

2019/05/11 01:05

htmlの生成がJavaScriptではなくPHPである時点で出ているhtmlは動的ではなく静的ですよ。このタイトルや内容だと「JavaScriptで動的に作ったhtml」のような印象を受けるので内容調整していただければと。回答の方向性が全く変わってきますし、「ではこれはどうなのでしょうか？」とあげられたコードに対して自身が実行した結果どうだったのかが書かれていないので、「何が問題課題なのか不明」（非推奨）です。

huwatoro

2019/05/11 01:10 編集

すいません動的はAJAXで考えてください。

CHERRY

2019/05/11 01:12

そのajax で追加するコードが実行されるタイミングと jQuery の処理が実行されるタイミングは、いつでしょうか？

m.ts10806

2019/05/11 01:14

要件の後付けが多すぎます。前提や背景があるのでしたら全て記載しておいてください。 1つ前のコメントでも指摘させていただきましたように、内容次第で回答の方向性が変わってきます。内容に不明点や考えられる方向があるとそれだけ的確な回答につながらなくなる可能性が高まります。何かしらでエスパー回答がついたとしても「そういう意味じゃなくてこういう前提があって」「既にそこは調べて試した」となると回答が無駄になります。書かれたことしか汲み取れません。本当に何も調べず試さず丸投げする人との区別は他人には不可能です。いっそのこと、ヘルプ一通り読んで質問テンプレート利用して書き直したほうがいいくらいですね。こちら幾らコメントで追記されましてもデフォルト非表示なので目につきにくいです。

huwatoro

2019/05/11 01:21 編集

@CHERRYさんチェックボックスにチェックしたらajaxで「目的」にあるボタンが出力するので、その直後にそのボタンの「空っぽ」を書き換えたい感じです。なので「.each」は動的に使えるのかなって思いました。

退会済みユーザー

2019/05/11 08:02

質問者しゃんの、「動的に生成したDOM要素」については、「“非同期で”動的に生成したDOM要素」と言うようにしたら良いと思うのでちゅ。しょうすれば、象しゃんみたいに重箱の隅をつついて叩き壊す人にいぢめられる事は無くなると思うのでちゅ。

行動規範の内容に同意します

回答1件

ベストアンサー

DOM追加後に$("button").each()が呼び出されるならば、静的／動的にかかわらず、普通にすべてのボタンが処理対象になると思います。動的に追加したボタンだけを処理対象とする必要があるなら、クラス名で判別するのがよいのではないでしょうか。

下記のコードで、動的に追加したボタンもeachで処理できることを確認しました。

HTML
1<html>
2<head>
3<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
4<script>
5$(function() {
6    $('#current_button').on('click', function() {
7        $('body').append($('<button>').text('new_button'));
8        $('button').each(function() {
9            console.log($(this).text())
10        });
11    });
12});
13</script>
14</head>
15<body>
16<button id="current_button">click</button>
17</body>
18</html>

投稿2019/05/11 03:26

編集2019/05/11 03:54

退会済みユーザー

総合スコア0

退会済みユーザー

2019/05/11 03:35

と書いてから自信がなくなってきました。あとで試してみます。

退会済みユーザー

2019/05/11 03:50

試しました。動的に追加したボタンも処理対象になりました。試したコードは下記です。読みづらかったらすみません。 <html> <head> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(function() { $('#current_button').on('click', function() { $('body').append($('<button>').text('new_button')); $('button').each(function() { console.log($(this).text()) }); }); }); </script> </head> <body> <button id="current_button">click</button> </body> </html> Ajaxではありませんが、動的にボタンを追加してからeachを回しているという点では、ご質問の意図に沿っていると思います。

退会済みユーザー

2019/05/11 03:51

やっぱり化けましたね・・・。適宜お読み替えください。