PHP jQuery ajax提交按钮不工作

我想使用jquery和ajax创建一个带有add和remove字段的动态表单。但不幸的是，我的insert按钮应该转到insert.php无法工作。当我单击insert按钮时，什么也没有发生。单击insert按钮时，它将被重定向到数据库中的insert.php存储数据

repeater.js

    jQuery.fn.extend({
        createRepeater: function (options = {}) {
            var hasOption = function (optionKey) {
                return options.hasOwnProperty(optionKey);
            };

            var option = function (optionKey) {
                return options[optionKey];
            };

            var generateId = function (string) {
                return string
                    .replace(/\[/g, '_')
                    .replace(/\]/g, '')
                    .toLowerCase();
            };

            var addItem = function (items, key, fresh = true) {
                var itemContent = items;
                var group = itemContent.data("group");
                var item = itemContent;
                var input = item.find('input,select');

                input.each(function (index, el) {
                    var attrName = $(el).data('name');
                    var skipName = $(el).data('skip-name');
                    if (skipName != true) {
                        $(el).attr("name", group + "[" + key + "]" + "[" + attrName + "]");
                    } else {
                        if (attrName != 'undefined') {
                            $(el).attr("name", attrName);
                        }
                    }
                    if (fresh == true) {
                        $(el).attr('value', '');
                    }

                    $(el).attr('id', generateId($(el).attr('name')));
                    $(el).parent().find('label').attr('for', generateId($(el).attr('name')));
                })

                var itemClone = items;

                /* Handling remove btn */
                var removeButton = itemClone.find('.remove-btn');

                if (key == 0) {
                    removeButton.attr('disabled', true);
                } else {
                    removeButton.attr('disabled', false);
                }

                removeButton.attr('onclick', '$(this).parents(\'.items\').remove()');

                var newItem = $("<div class='items'>" + itemClone.html() + "<div/>");
                newItem.attr('data-index', key)

                newItem.appendTo(repeater);
            };

            /* find elements */
            var repeater = this;
            var items = repeater.find(".items");
            var key = 0;
            var addButton = repeater.find('.repeater-add-btn');

            items.each(function (index, item) {
                items.remove();
                if (hasOption('showFirstItemToDefault') && option('showFirstItemToDefault') == true) {
                    addItem($(item), key);
                    key++;
                } else {
                    if (items.length > 1) {
                        addItem($(item), key);
                        key++;
                    }
                }
            });

            /* handle click and add items */
            addButton.on("click", function () {
                addItem($(items[0]), key);
                key++;
            });
        }
    });

jQuery.fn.extend({
createRepeater:函数（选项={}）{
var haspoption=函数（optionKey）{
返回options.hasOwnProperty（optionKey）；
};
var option=函数（optionKey）{
返回选项[optionKey]；
};
var generateId=函数（字符串）{
返回字符串
.替换（/\[/g，'.''.'）
.替换（/\]/g''）
.toLowerCase（）；
};
var addItem=函数（项、键、刷新=真）{
var itemContent=项目；
var组=itemContent.data（“组”）；
var item=itemContent；
var input=item.find（'input，select'）；
输入。每个功能（索引，el）{
var attrName=$（el）.data（'name'）；
var skipName=$（el）.data（'skip-name'）；
if（skipName！=真）{
$（el）.attr（“名称”，组+”[“+key+”]“+”[“+attrName+”]”）；
}否则{
if（attrName！=“未定义”）{
$（el）.attr（“名称”，attrName）；
}
}
if（fresh==true）{
$（el.attr（'值'，''）；
}
$（el.attr（'id'，generateId（$（el.attr（'name'）））；
$（el.parent（）.find（'label'）.attr（'for'，generateId（$（el.attr（'name'））；
})
var itemClone=项目；
/*处理删除btn*/
var removeButton=itemClone.find（'.remove btn'）；
如果（键==0）{
removeButton.attr（'disabled'，true）；
}否则{
removeButton.attr（'disabled'，false）；
}
removeButton.attr（'onclick'，'$（this）.parents（\'.items\'）.remove（）'）；
var newItem=$（“”+itemClone.html（）+“”）；
newItem.attr（'data-index'，key）
newItem.appendTo（中继器）；
};
/*查找元素*/
var中继器=此；
var items=repeater.find（“.items”）；
var-key=0；
var addButton=repeater.find（'.repeater add btn'）；
项目。每个功能（索引、项目）{
项目。删除（）；
if（hasOption（'showFirstItemToDefault'）和&option（'showFirstItemToDefault'）==true）{
addItem（$（项目），键）；
key++；
}否则{
如果（items.length>1）{
addItem（$（项目），键）；
key++；
}
}
});
/*处理单击并添加项目*/
addButton.on（“单击”），函数（）{
addItem（$（项[0]），键）；
key++；
});
}
});

index.php

<?php
//session_start();
$servername = "localhost";
$username = "root";
$password = "bptm2012";
$dbname = "icompex";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
$sql = "select panel_id,panel_kp,panel_nm from mem_panel";
$result = mysqli_query($conn, $sql);
?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Add Remove Panel Group and Category</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
            crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="repeater.js" type="text/javascript"></script>

</head>
<body>
<div class="container">
    <br/>
    <h3 align="center">Kemaskini Ahli dan Kumpulan Panel Penilai</h3>
    <br/>
    <div style="width:100%; max-width: 600px; margin:0 auto;">
        <div class="panel panel-default">
            <div class="panel-heading">Menu Kumpulan dan Ahli Panel</div>
            <div class="panel-body">
                <span id="success_result"></span>
                <div id="div1"><h2></h2></div>

                <form method="post" id="repeater_form">
                    <div class="form-group">
                        <label>Pilih Group</label><br>
                        <select class="form-control" name="cat">

                            <option value="" disabled selected>Sila Pilih Kategori</option>
                            <option value="A">A - Rekabentuk Alam Bina & Rekabentuk Dalaman</option>
                            <option value="B">B - Pembinaan dan Bahan</option>
                            <option value="C">C - Mesin, Peralatan dan Proses Pergilangan</option>
                            <option value="D">D - ICT & Multimedia</option>
                            <option value="E">E - Elektrik, Elektronik dan Telekomunikasi</option>
                            <option value="F">F - Pengangkutan, Automatif & Penerbangan</option>
                            <option value="G">G - Pertanian, Alam Sekitar dan Tenaga Boleh Diperbaharui</option>
                            <option value="H">H - Pengajaran dan Pembelajaran</option>
                            <option value="I">I - Perkhidmatan dan Pemasaran Produk</option>
                        </select>
                        <label>Sila Pilih Kumpulan Panel</label><br>
                        <select name="group" class="form-control">
                            <option value="" disabled selected>Sila Pilih Kumpulan Panel</option>
                            <option value="1">Panel 1</option>
                            <option value="2">Panel 2</option>
                            <option value="3">Panel 3</option>
                            <option value="4">Panel 4</option>
                            <option value="5">Panel 5</option>
                            <option value="6">Panel 6</option>
                            <option value="7">Panel 7</option>
                            <option value="8">Panel 8</option>
                            <option value="9">Panel 9</option>
                            <option value="10">Panel 10</option>
                            <option value="11">Panel 11</option>
                            <option value="12">Panel 12</option>
                            <option value="13">Panel 13</option>
                            <option value="14">Panel 14</option>
                            <option value="15">Panel 15</option>
                        </select>
                    </div>
                    <div id="repeater">
                        <div class="repeater-heading" align="right">
                            <button type="button" class="btn btn-primary repeater-add-btn">Tambah Ahli</button>
                        </div>
                        <div class="clearfix"></div>
                        <div class="items" data-group="programming_languages">
                            <div class="item-content">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-9">
                                            <label>Pilih Nama Ahli Panel</label>
                                            <select class="form-control" data-skip-name="true" data-name="skill[]"
                                                    required>
                                                <?php
                                                echo "<option>Sila Pilih Ahli Panel</option>";
                                                if (mysqli_num_rows($result) > 0) {
                                                    // output data of each row
                                                    while ($row = mysqli_fetch_assoc($result)) {
                                                        echo '<option value="' . $row['panel_id'] . '">' . $row['panel_nm'] . '</option>';
                                                    }
                                                } else {
                                                    echo "<option>Maaf Belum ada pendaftaran ahli panel dibuat</option>";
                                                }

                                                mysqli_close($conn);
                                                ?>
                                            </select>
                                        </div>
                                        <div class="col-md-3" style="margin-top:24px;" align="center">
                                            <button id="remove-btn" class="btn btn-danger"
                                                    onclick="$(this).parents('.items').remove()">Remove
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div class="form-group" align="center">
                        <br/><br/>
                        <input type="submit" name="insert" class="btn btn-success" value="insert"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

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

        $("#repeater").createRepeater();

        $('#repeater_form').on('submit', function (event) {
            event.preventDefault();
            $.ajax({
                url: "insert.php",
                method: "POST",
                data: $(this).serialize(),
                success: function (data) {
                    $('#repeater_form')[0].reset();
                    $("#repeater").createRepeater();
                    $('#success_result').html(data);
                    /*setInterval(function(){
                        location.reload();
                    }, 3000);*/
                }
            });
        });

    });

</script>
</body>
</html>

<?php

connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

if (isset($_POST["name"])) {
    $skill = implode(", ", $_POST["skill"]);

    $data = array(
        ':panel_cat' => $_POST["cat"],
        ':panel_group' => $_POST["group"],
        ':panel_mem' => $skill
    );

    $query = "
 INSERT INTO panel_penilai 
 (panel_cat, panel_group,panel_mem) 
 VALUES (:panel_cat, :panel_group, :panel_mem)
 ";

    $statement = $connect->prepare($query);
    if ($statement->execute($data)) {
        echo '
  <div class="alert alert-success">
   Data Successfully Inserted
  </div>
  ';
    }
}

//?>

添加/删除配电盘组和类别


Kemaskini Ahli和Kumpulan小组


菜单Kumpulan dan Ahli面板
Pilih组

Sila Pilih Kategori
A-雷卡宾图克阿拉姆比纳和雷卡宾图克达拉曼
B-彭比南和巴哈恩
C-梅辛、佩拉坦和佩吉兰根散文
D-ICT与多媒体
E-电子技术、电子技术和电信
F-彭甘库坦、自动化和佩内班甘
G-第三方、第三方和第三方
H-Pengajaran和Pembelajaran
I-项目经理和项目经理
Sila Pilih Kumpulan面板

Sila Pilih Kumpulan面板
小组1
小组2
小组3
小组4
小组5
小组6
小组7
小组8
小组9
小组10
小组11
小组12
小组13
小组14
小组15
坦巴阿利
Pilih Nama Ahli小组
去除
connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

$connect = new PDO("mysql:host=localhost;dbname=icompex", "root", "bptm2012");

$.ajax({
    url:"insert.php",
    method:"POST",
    data:$(this).serialize(),
    success:function(data)
    {
        $('#repeater_form')[0].reset();
        $("#repeater").createRepeater();
        $('#success_result').html(data);
        /*setInterval(function(){
                    location.reload();
        }, 3000);*/
    },
    // like this
    error : function(err){
        console.log(err);
    }
});

<input type="submit" name="insert" class="btn btn-success" value="insert" />
change to
<input type="button" id="submit" name="insert" class="btn btn-success" value="insert" />

$('#repeater_form').on('submit', function(event){}
change to 
$('#submit').on('click', function(event){}