[jQuery] ajaxで外部の読み込みでの疑問。

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件

ベストアンサー

仕様がわからないので確認です。
ボタンを押すとアラートと削除が追加されるとしてこれはjavascriptと一緒に
読まないといけないものなのでしょうか？
挙動に関しては元のページに書いておいて、ajaxで読み込むのは部品だけというのが
普通だと思います。
idが数字だけだったりやや問題がある箇所も見受けられえます。

アラートボタンを押したときの挙動は、一度だけ所定の文字がでるのでしょうか？
削除ボタンは、当該のアラートと削除ボタンを含むDIV毎削っていいのでしょうか？

そもそもこれはajaxでやる必要がないのですがどうしてもajaxでやりたいということで良いのですね？

index.html

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
2<script>
3$(function(){
4  var num = 0;
5  $('#post').on('click',function(){
6    num = num + 1;
7    $.ajax({
8    url: 'data.php',
9    type: 'POST',
10    data: {num:num},
11    dataType: 'text',
12    }).done(function( data ) {
13      $('#add').append(data);
14    });
15  });
16  $('#add').on('click','button.del',function(){
17    $(this).closest("div").remove();
18  }).on('click','button.alert',function(){
19    alert('Hello!!');
20  });
21});
22</script> 
23<button id="post">ボタン</button>
24<div id="add"></div>

data.php

PHP
1<div id='x<?=$_POST['num'] ?>'>
2<button class="alert">アラート</button><button class="del">削除</button>
3</div>

投稿2017/06/27 12:42

yambejp

総合スコア114779

xjaPANDA

2017/06/27 13:20

ありがとうございます。おかげで理解できました。 >ボタンを押すとアラートと削除が追加されるとしてこれはjavascriptと一緒に読まないといけないものなのでしょうか？一緒に読まなくてはできないと思っていましたので、とても勉強になりました。 >アラートボタンを押したときの挙動は、一度だけ所定の文字がでるのでしょうか？ >削除ボタンは、当該のアラートと削除ボタンを含むDIV毎削っていいのでしょうか？ >そもそもこれはajaxでやる必要がないのですがどうしてもajaxでやりたいということで良いのですね？このあたりは、全て推測されたとおりです。言葉足らずにもかかわらず、例を作っていただいてありがとうございます。それと、idが数字だけは一般的にやはりまずいのでしょうか?　

xjaPANDA

2017/06/27 13:23

それとgooでも時々、教えていただいてありがとうございます。名前で分かりました。

yambejp

2017/06/27 13:48

> idが数字だけは一般的にやはりまずいのでしょうか? 一応まずいらしいですよ。動く動かないという話であれば多分動きますけど急に動かなくなっても文句が言えない・・・くらいの感覚でよいでしょう > goo gooがホームグラウンドなので、また機会があったらどちらでも回答できると思いますなんやかんやで12年くらいやってます

xjaPANDA

2017/06/28 08:28

返信ありがとうござまいす。数値でも動いてしまうので、あまり考えずに使っていましたが、確かに、数値だけのidって他に見ないので、これからは使わないでおこうと思います。

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