jQueryのajaxについて、読み込みで、まだよく分かっていないので、勉強のために、検証用サンプルを作りました。
index.htmlの[ボタン]を押すごとに、<div id="add"></div>に、ajaxで外部のdata.phpより読み込んだ<div id="">[アラート][削除]</div> の2つのボタンが追加されていくものを作りました。それぞれの追加された、[アラート]を押すと、alert('hello!') と表示され、[削除]を押すと、その部分のidの部分が削除されるようになっています。コードは書は下記にあります。
ここで疑問が2つあります。
① いくつか[ボタン]を押して、[アラート][削除]ボタンを追加してみた後に、[削除ボタン]で、いくつか削除してみます。F12で確認しながら、その後[アラート]ボタンを押すと、コード上でも、削除ボタンを押した部分は、.replaceWith('');で書き換えられているので、消えていますが、実際は、追加した分だけ回数分のalert('hello!')が連続で表示されてしまいます。
② あとから追加された[アラート][削除]ボタンだけが正常に動きます。はじめに追加したものでは、[アラート]ボタンを押すと、その後に追加した分だけのアラートが連続表示され、[削除]ボタンでは、全てのものが消えてしまいます。
以上が疑問点ですが、コードの書き方自体、ボタンで追加した分だけ、<script></script>が追加されるので、もっと効率のよい書き方がありましたら、アドバイスください。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>TEST</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <script type="text/javascript"> $(function(){ var num = 0; $('#post').click(function(){ num = num + 1; $.ajax({ url: 'data.php', type: 'POST', data: { num: num}, timeout: 10000, dataType: 'text' }).done(function( data ) { $('#add').append(data); }); }); }); </script> <button id="post">ボタン</button> <div id="add"></div> </body> </html>
data.php
<div id='<?=$_POST['num'] ?>'> <script type="text/javascript"> $(function(){ $('button.alert').click(function(){ alert('Hello!!'); }); $('button.del').click(function(){ $('#<?=$_POST['num'] ?>').replaceWith(''); }); }); </script> <button class="alert">アラート</button><button class="del">削除</button> </div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/27 13:20
2017/06/27 13:23
2017/06/27 13:48
2017/06/28 08:28