実現したいこと
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」を効かせるような方法があればもっと手っ取り早いと感じたので、そのような方向で質問させて頂きました。
何か不足した情報などございましたら随時ご指摘ください。
質問は以上になります。どうぞご指導宜しくお願い申し上げます。
回答3件
あなたの回答
tips
プレビュー