ajaxで更新したhtmlのbutton要素が機能しない

前提・実現したいこと

xamppを使って簡単な掲示板を作っています。
現在の内容としては、フォームから送信されたものをajaxでページに更新していき、各投稿の下に返信用フォームを表示・非表示切り替えできるボタンを設置しています。
ここで、ajaxで更新した後になるとbuttonをクリックしても表示を切り替えるメソッドが動かないということが起こりました。
ajaxで更新する前もしくは、ページを再読み込みすると問題なく動きます。

該当のソースコード

test.php

php
1<?php
2require_once "send.php";
3$regist = getPostData();
4?>
5
6<!DOCTYPE html>
7<html>
8<head>
9    <meta charset="UTF-8">
10    <title>掲示板サンプル</title>
11    <link rel="stylesheet" href="test.css">
12    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
13</head>
14<body>
15<h1>掲示板サンプル</h1>
16<section>
17    <h2>新規投稿</h2>
18    <div id="error"></div>
19    名前 : <input type="text" name="name" value="" id="name"><br>
20    投稿内容: <input type="text" name="content" value="" id="content"><br>
21    <button type="submit" id="send">投稿</button>
22</section>
23
24<section>
25	<h2>投稿内容一覧</h2>
26        <div id="post-data">
27            <?php foreach($regist as $loop):?>
28                <div>No：<?php echo $loop['id']?></div>
29                <div>名前：<?php echo $loop['name']?></div>
30                <div>投稿内容：<?php echo $loop['content']?></div>
31                <div>投稿時間：<?php echo $loop['created_at']?></div>
32                <button class="resend" value="#resend-form<?php echo $loop['id']?>">返信</button>
33                <div id="resend-form<?php echo $loop['id']?>" class="resend-form">
34                    名前：<input type="text" name="name"  value="">
35                    投稿内容：<input type="text" name="content" value="">
36                    <input type="hidden" id="" value="<?php $loop['id']?>">
37                    <button type="submit" id="">投稿</button>
38                </div>
39                <div>------------------------------------------</div>
40            <?php endforeach;?>
41        </div>
42</section>
43
44<script>
45document.getElementById('send').onclick = function(){
46    let name = $('#name').val();
47    let content = $('#content').val();
48    $.ajax({
49        url: "send.php",
50        type: "post",
51        dataType: "text",
52        data:{'name': name, 'content': content}
53    }).done(function (response) {
54        let res = JSON.parse(response);
55        let html = '';
56        if(!res['error']){
57            res.forEach( val => {
58                html += 
59                    `<div>No：${val['id']}</div>
60                    <div>名前：${val['name']}</div>
61                    <div>投稿内容：${val['content']}</div>
62                    <div>投稿時間：${val['created_at']}</div>
63                    <button class="resend" value="#resend-form${val['id']}">返信</button>
64                    <div id="resend-form${val['id']}" class="resend-form">
65                        名前：<input type="text" name="name" value="">
66                        投稿内容：<input type="text" name="content" value="">
67                        <input type="hidden" id="" value="${val['id']}">
68                        <button type="submit" id="">投稿</button>
69                    </div>
70                    <div>------------------------------------------</div>`;
71            });
72            $('#post-data').html(html);
73            $('#error').html('');
74            $('#name').val('');
75            $('#content').val('');
76        }else{
77            res['error'].forEach( val => {
78                html += val + '<br>';
79            });
80            $('#error').html(html);
81        }
82    }).fail(function (xhr,textStatus,errorThrown) {
83        alert('error');
84    });
85}
86
87//返信フォーム表示機能
88$(function () {
89    $('.resend').click(function () {
90        let resend_id = $(this).val();
91        console.log(resend_id);
92        $(resend_id).toggle();
93    });
94});
95</script>
96</body>
97</html>

send.php

php
1<?php
2$errors = [];
3
4if($_POST){
5    $id = null;
6    $name = $_POST["name"];
7    $content = $_POST["content"];
8    if(!$name){
9        $errors[] .= "名前を入力してください";
10    }
11    if(!$content){
12        $errors[] .= "投稿内容を入力してください";
13    }
14    if(!$errors){
15        date_default_timezone_set('Asia/Tokyo');
16        $created_at = date("Y-m-d H:i:s");
17        //DB接続情報を設定します。
18        $pdo = new PDO(
19            "mysql:dbname=sample;host=localhost","root","",array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET `utf8`")
20        );
21        //SQLを実行。
22        $regist = $pdo->prepare("INSERT INTO post(id, name, content, created_at) VALUES (:id,:name,:content,:created_at)");
23        $regist->bindParam(":id", $id);
24        $regist->bindParam(":name", $name);
25        $regist->bindParam(":content", $content);
26        $regist->bindParam(":created_at", $created_at);
27        $regist->execute();
28
29        $res = [];
30        $post_data = getPostData();
31        $cnt = 0;
32        foreach($post_data as $loop){
33            $res[$cnt]['id'] = $loop['id'];
34            $res[$cnt]['name'] = $loop['name'];
35            $res[$cnt]['content'] = $loop['content'];
36            $res[$cnt]['created_at'] = $loop['created_at'];
37            $cnt++;
38        }
39        echo json_encode($res);
40    }else{
41        echo json_encode(['error' => $errors]);
42    }
43}
44
45function getPostData(){
46    //DB接続情報を設定します。
47    $pdo = new PDO(
48        "mysql:dbname=sample;host=localhost","root","",array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET CHARACTER SET `utf8`")
49    );
50    //SQLを実行。
51    $regist = $pdo->prepare("SELECT * FROM post order by created_at DESC");
52    $regist->execute();
53    return $regist;
54}
55?>

test.css

css
1.resend-form{
2    display: none;
3}

試したこと

htmlメソッドで生成するbuttonタグのclassやidの誤記が原因かと思いましたが違いました。

補足情報（FW/ツールのバージョンなど）

jqueryは以下のcdnを利用してます。

退会済みユーザー

2020/08/19 11:53

phpファイル一つにすべて含まれているのであれば、ひとくくりで掲載してください。それとも、ファイルとして別々なのであれば、それぞれファイル名も示してください。

satotai

2020/08/19 12:26

わざわざご依頼ありがとうございます！依頼通り、修正いたしました。

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

回答2件

ちょっと要領を得ませんが、formがないからsubmitは効かないだけでは？
jQueryの表記も中途半端なのでもっと寄せたほうがよいです。

投稿2020/08/20 00:50

yambejp

総合スコア114919

html +=
のあとの引用符が「`」になってるのが問題かも？

「'」に直したらどうでしょうか。
文字列の中で変数展開をさせているのもちょっと気になりますが。

<?php foreach($regist as $loop):?>
の$registがどこで定義されているのか。
「Notice: Undefined variable: regist」と
「Warning: Invalid argument supplied for foreach()」を生じています。

phpコードの抜粋のようなので動作確認のしようもないのですが、

投稿2020/08/19 11:56

編集2020/08/19 12:04

退会済みユーザー

総合スコア0