質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,729

score 120


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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

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

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

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

  • index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
  var num = 0;
  $('#post').on('click',function(){
    num = num + 1;
    $.ajax({
    url: 'data.php',
    type: 'POST',
    data: {num:num},
    dataType: 'text',
    }).done(function( data ) {
      $('#add').append(data);
    });
  });
  $('#add').on('click','button.del',function(){
    $(this).closest("div").remove();
  }).on('click','button.alert',function(){
    alert('Hello!!');
  });
});
</script> 
<button id="post">ボタン</button>
<div id="add"></div>
  • data.php
<div id='x<?=$_POST['num'] ?>'>
<button class="alert">アラート</button><button class="del">削除</button>
</div>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/27 22:20

    ありがとうございます。おかげで理解できました。
    >ボタンを押すとアラートと削除が追加されるとしてこれはjavascriptと一緒に
    読まないといけないものなのでしょうか?
    一緒に読まなくてはできないと思っていましたので、とても勉強になりました。

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


    キャンセル

  • 2017/06/27 22:23

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

    キャンセル

  • 2017/06/27 22:48

    > idが数字だけは一般的にやはりまずいのでしょうか?

    一応まずいらしいですよ。動く動かないという話であれば多分動きますけど
    急に動かなくなっても文句が言えない・・・くらいの感覚でよいでしょう

    > goo

    gooがホームグラウンドなので、また機会があったらどちらでも回答できると思います
    なんやかんやで12年くらいやってます

    キャンセル

  • 2017/06/28 17:28

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る