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

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

ただいまの
回答率

88.80%

jQueryのAjaxでページ内に挿入したHTMLでScriptを実行したい

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 2,031

ky_46

score 93

前提・実現したいこと

WEBアプリで、1文字入力する毎に、絞り込んだデータ一覧を表示するような仕組みを作成したいと思っています。

試作として、ガンプラ屋さんデータベースを作成しました。

該当のソースコード

create table ganpura(id varchar(20),name varchar(20),price int);
insert into ganpura values
('MS-06','ザク',2000),
('MS-07','グフ',2000),
('MS-09','ドム',2500),
('MSM-03','ゴック',1900),
('MSM-07','ズゴック',1700),
('MSM-04','アッガイ',2000),
('RX-78','ガンダム',2500),
('RX-77','ガンキャノン',2500),
('RX-75','ガンタンク',2800)
;

次のようなHTMLを組みました。HTMLの名称は、Question008b.htmlとします。Googleで調べ、文字を入力する度、AjaxでQuestion008b.phpに文字列を渡すようにしました。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQueryを使ったテキストボックス</title>
<link rel="stylesheet" href="">
<script src="../common/jquery/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        div.molls{
            cursor: pointer;
            cursor: hand;
            height: 25px;
            width: 400px;
        }
    </style>
</head>

<body>
<script>
    $(document).ready(function(){

        $('#textarea2 textarea').each(function(){
            $(this).bind('keyup', hoge(this));
        });

        function hoge(elm){
            var v, old = elm.value;
            return function(){
                if(old != (v=elm.value)){
                    old = v;
                    str = $(this).val();
                    $.ajax({ //ajaxによる非同期通信発生
                        type: "POST", //POST送信でデータを受け渡す
                           url: "Question008b.php", //ータを送る
                           data: {id:$(this).val()}, //id:seirekiに入力された文字列         
                        success: function(hoge) //接続が成功
                        {
                            $("#textarea2 div").html(hoge);
                        },         
                        error: function(XMLHttpRequest,textStatus,errorThrown) //接続が失敗
                        {
                            alert('エラーです!'); //エラーを表示
                        }
                    });

                }
            }
        }
    });
</script>

<h4>実行例</h4>
<div class="box2">
<div id="textarea2">
<textarea></textarea>
<div></div>
</div>
</div>

    <!-- ここにjQuery -->

         <script>
      $('div.molls').on('click', function(){
          var number = jQuery(this).attr('data-molsel');
          $('<form/>', {action: 'Question008b2.php', method: 'post'})
          .append($('<input/>', {type: 'hidden', name: 'mold_serial', value: number}))
          .appendTo(document.body)
          .submit();
      });

    </script>


</body>
</html>


受け取る方のPHPはこのようになっています。ajaxからユーザーが入力した文字を受け取り、データベースを検索して、名前の一覧を返します。DIVタグでできたこの部分は、Question008b.htmlの所定の場所に挿入されます。

<?php

    $id = $_POST['id'];
    $id .= '%';

    $dsn = 'mysql:dbname=[接続文字列]';
    $user='[接続ユーザー]';
    $password='[接続パスワード]';
    $dbh = new PDO($dsn, $user, $password);
    $dbh->query('SET NAMES utf8');

    $sql = 'SELECT `id`, `name` FROM `ganpura` WHERE `id` Like ';
    $sql .= '\'';
    $sql .= $id;
    $sql .= '\'';
    $sql .= ';';

    $stmt = $dbh->prepare($sql);
    $stmt->execute();
    $dbh=null;

    $ectx = '';

    while(true)
    {
        $rec=$stmt->fetch(PDO::FETCH_ASSOC);
        if($rec == false)
        {
            break;
        }
        $ectx .= '<DIV class="molls" data-mdmame="';
        $ectx .= $rec['id'];
        $ectx .= '">';

        $ectx .= $rec['name'];
        $ectx .= '</DIV>';
        $ectx .PHP_EOL; 
    }

echo $ectx;

?>

ここまでは順調で、例えばRを入力すると、MSで始まるジオン系はすべ除かれ、連邦系のもののみが、画面に表示されます。

<html><head>
<meta charset="utf-8">
<title>jQueryを使ったテキストボックス</title>
<link rel="stylesheet" href="">
<script src="../common/jquery/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        div.molls{
            cursor: pointer;
            cursor: hand;
            height: 25px;
            width: 400px;
        }
    </style>
</head>

<body>
<script>
    $(document).ready(function(){

        $('#textarea2 textarea').each(function(){
            $(this).bind('keyup', hoge(this));
        });

        function hoge(elm){
            var v, old = elm.value;
            return function(){
                if(old != (v=elm.value)){
                    old = v;
                    str = $(this).val();
                    $.ajax({ //ajaxによる非同期通信発生
                        type: "POST", //POST送信でデータを受け渡す
                           url: "Question008b.php", //ータを送る
                           data: {id:$(this).val()}, //id:seirekiに入力された文字列         
                        success: function(hoge) //接続が成功
                        {
                            $("#textarea2 div").html(hoge);
                        },         
                        error: function(XMLHttpRequest,textStatus,errorThrown) //接続が失敗
                        {
                            alert('エラーです!'); //エラーを表示
                        }
                    });

                }
            }
        }
    });
</script>

<h4>実行例</h4>
<div class="box2">
<div id="textarea2">
<textarea></textarea>
<div><div class="molls" data-mdmame="RX-78">ガンダム</div><div class="molls" data-mdmame="RX-77">ガンキャノン</div><div class="molls" data-mdmame="RX-75">ガンタンク</div></div>
</div>
</div>

    <!-- ここにjQuery -->

         <script>
      $('div.molls').on('click', function(){
          var number = jQuery(this).attr('data-molsel');
          $('<form/>', {action: 'Question008b2.php', method: 'post'})
          .append($('<input/>', {type: 'hidden', name: 'mold_serial', value: number}))
          .appendTo(document.body)
          .submit();
      });

    </script>




</body></html>


希望としては、この後、表示されている名前をクリックすると、Question008b2.phpへ、data-mdmameの値を持って遷移したいです。
Question008b2.phpはこのような内容です。

<?php

    $id = $_POST['id'];

    $dsn = 'mysql:dbname=[接続文字列]';
    $user='[接続ユーザー]';
    $password='[接続パスワード]';
    $dbh = new PDO($dsn, $user, $password);
    $dbh->query('SET NAMES utf8');

    $sql = 'SELECT `id`, `name`,`price` FROM `ganpura` WHERE `id` = ';
    $sql .= '\'';
    $sql .= $id;
    $sql .= '\'';
    $sql .= ';';

    $stmt = $dbh->prepare($sql);
    $stmt->execute();
    $dbh=null;

    $ectx = '';

    $rec=$stmt->fetch(PDO::FETCH_ASSOC);
    $msid = $id;
    $msname = $rec['name'];
    $msprice =$rec['price'];

?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>

<body>
型式:<?php print($msid); ?>
名前:<?php print($msname); ?>
値段:<?php print($msprice); ?>

</body>
</html>

ところが、実際には表示された名前をクリックしてもQuestion008b2.phpへ遷移しません。

ajaxで検索結果のDIVを取り込んだ状態のソースコードを、HTMLとして保存すると、正常にQuestion008b2.phpへ移動しますので、ajaxで読み込んだソースには、前回、こちらで質問させていただいた[要素を与えて、jQueryで別ページに遷移したい」を参考に組み込んだFOMEを作成して送信するブロックが適用されていないようです。

こちらでも、類似の質問が在る事は確認しましたが、サンプルのソースもなく、また、回答も放置されておられるようですので、作成したソースをつけたうえで質問とさせていただきます。

ajaxで読み込んだ部分のHTMLにも、JavaScriptを適用させる、なにか良い方法がありましたら、ご教授ください。

よろしくお願いいたします。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1

動的に生成したDOM要素に対してjQueryでイベントを設定する場合

      $('div.molls').on('click', function(){
          var number = jQuery(this).attr('data-molsel');
          $('<form/>', {action: 'Question008b2.php', method: 'post'})
          .append($('<input/>', {type: 'hidden', name: 'mold_serial', value: number}))
          .appendTo(document.body)
          .submit();
      });


↑これを

      $(document).on("click", "div.molls", (function(){
          //同様の処理
      });


こうしてはどうでしょう。

または、都度作成するdivにonclick属性をつけても、クリックに反応します。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/14 13:53

    ありがとうございます。無事、解決しました。

    <script>
    $('div.molls').on('click', function(){
    var number = jQuery(this).attr('data-mdmame');
    $('<form/>', {action: 'Question008b2.php', method: 'post'})
    .append($('<input/>', {type: 'hidden', name: 'id', value: number}))
    .appendTo(document.body)
    .submit();
    });
    </script>




    <script>
    $(document).on('click', 'div.molls',(function(){
    var number = jQuery(this).attr('data-mdmame');
    $('<form/>', {action: 'Question008b2.php', method: 'post'})
    .append($('<input/>', {type: 'hidden', name: 'id', value: number}))
    .appendTo(document.body)
    .submit();
    }));
    </script>

    ごしてきの書き換えで、無事にDIVのdata-*を引き取り、それを元にFORMタグとボタンを作成して、ジャンプしているようです。
    Question008b2.php でキチンと対応のMSの価格が出ました。

    ありがとうございました。

    キャンセル

+1

nameに<a href="Question008b2.php?id=xxx">名前</a>となるよう調整し
postではなくgetでidを検索すればよいのでは?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/13 17:17

    ご回答ありがとうございます。

    実は、こちらの件はすでに質問でご回答を得ています。
    https://teratail.com/questions/70218
    で丁寧なご回答いただき、DIVそのものをクリックする事で、目的のphpにデータ付きで遷移する事には成功しています。

    このときも、Aタグは移動先として判りにくいので、枠全体の何処でもクリックすれば飛ぶようにできないか? と言われたのでした…字のところまでマウスを移動させるのって、そんなに面倒なんでしょうかねぇ…sigh...

    ですので…可能ならAタグは使用せずに済ませたいところです。

    キャンセル

  • 2017/04/13 17:25

    結局レガシーな移動処理はアンカーかサブミットしかないので、
    なにか別のオブジェクトや領域をつかったページ遷移は
    javascriptなどでUIを調整するということです。

    キャンセル

  • 2017/04/14 13:54

    ありがとうございました。無事に解決しました。

    キャンセル

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

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

関連した質問

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