来自动态内容的Ajax代码不会执行

Question

我创建了一个动态网页。页面内容来自MySQL中的表。以下是单击选项卡时来自数据库的内容。 Page有一个表，其值使用<td> id从外部JS文件填充。在呈现页面后添加脚本。

<div class="container">
    <div class="table-responsive">
        <div class=col-md-12>
            <table class="table table-striped  table-responsive table-hover" 
                   id="fp_table" style="display:none">
              <colgroup>
                <col class="col-md-1>
                <col class=" col-md-7>
              </colgroup>
              <tbody>
                <tr class="table-bordered">
                  <th id="val1_h" class="info-big col-md-1">Value 1</th>
                  <td id="val1" class="fp class=" fp col-md-7 "></td>
                </tr>
                <tr class="table-bordered">
                  <th id="val2_h" class="info col-md-1">Value 2</th>
                  <td id="val2" class="fp col-md-7"></td>
                </tr>
                <tr class="table-bordered">
                  <th id="val3_h" class="info col-md-1">Value 3</th>
                  <td id="val3" class="fp class=" fp col-md-7 "></td>
                </tr>
                <tr class="table-bordered">
                  <th id="val4_h" class="info col-md-1">Value 4</th>
                  <td id="val4" class="fp class=" fp col-md-7 "></td>
                </tr>
                <tr class="table-bordered ">
                  <td id="val5_h" class="info col-md-1 ">Value 5</td>
                  <td id="val5" class="fp col-md-7 " 
                  style="word-wrap: break-word;min-width: 300px;max-width: 300px; "></td>
                </tr>
                <tr class="table-bordered ">
                  <th id="val6_h" class="info col-md-1 ">Value 6</th>
                  <td id="val6" class="fp col-md-7 "></td>
                </tr>
                <tr  class="table-bordered ">
                  <th id="val7_h" class="info col-md-1 ">Value 7</th>
                  <td id="val7" class="fp col-md-7 "></td>
                <tr class="table-bordered ">
                  <th id="val8_h"class="info col-md-1 ">Value 8</th>
                  <td id="val8" class="fp col-md-7 table-bordered "></td>
                </tr>
                <tr class="table-bordered ">
                  <th id="val9_h" class="info col-md-1 ">Value 9</th>
                  <td id="val9" class="fp col-md-7 "></td>
                </tr>
                <tr class="table-bordered ">
                  <th id="val10_h" class="info col-md-1 ">Value 10</th>
                  <td id="val10" class="fp col-md-7 "></td>
                </tr>
                <tr class="table-bordered ">
                  <th id="val11_h" class="info col-md-1 ">Value 11</th>
                  <td id="val11" class="fp col-md-7 "></td>
                </tr>
                </tbody>
              </table>
              <div id="status"></div>
            </div>
        </div>      
        <button class="btn btn-default" type="submit" id="btnFP" >
          Click to view hidden table
        </button>
    </div>
</div>
<script src="js/js_code_that_populates_table.js" type="text/javascript"></script>
<script>
function insert_data() {
    var val1 = document.getElementById("val1").innerHTML;
    var val2 = document.getElementById("val2").innerHTML;
    var val3 = document.getElementById("val3").innerHTML;
    var val4 = document.getElementById("val4").innerHTML;
    var val5 = document.getElementById("val5").innerHTML;
    var val6 = document.getElementById("val6").innerHTML;
    var val7 = document.getElementById("val7").innerHTML;
    var val8 = document.getElementById("val8").innerHTML;
    var val9 = document.getElementById("val9").innerHTML;
    var val10 = document.getElementById("val10").innerHTML;
    var val11 = document.getElementById("val11").innerHTML;
    $( window ).on( "load", function() { 
        console.log('document ready');
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: "config/insert.php",
            contentType: "application/json; charset=utf-8",
            data: { sendval1:val1, sendval2:val2, sendval3:val3, 
                    sendval4:val4, sendval5:val5, sendval6:val6, 
                    sendval7:val7, sendval8:val8, sendval9:val9, 
                    sendval10:val10, sendval11:val11  },
            success: function(data){
               alert('Success');
            },
            error: function(req, err){ console.log('my message' + err); 
            }
        });
    });
}
insert_data();   
$( "button" ).click(function() {
    $( "table" ).toggle();
    $( "button" ).hide();
});
</script>

这是我必须插入到DB

中的第二个表中的PHP代码

<?php 
    error_reporting(0);

    include('../../config/connection.php');

    $storeval1 = $_POST['sendval1'];
    $storeval2 = $_POST['sendval2']; 
    $storeval3 = $_POST['sendval3'];
    $storeval4 = $_POST['sendval4'];
    $storeval5 = $_POST['sendval5'];
    $storeval6 = $_POST['sendval6'];
    $storeval7 = $_POST['sendval7'];
    $storeval8 = $_POST['sendval8'];
    $storeval9 = $_POST['sendval9'];
    $storeval10 = $_POST['sendval10'];
    $storeval11 = $_POST['sendval11'];


    $q1 = "SELECT * FROM storeData where col1 = '$storeval1'";
    $r1 = mysqli_query($dbc, $q1); 
    $rowcount = mysqli_num_rows($r1);

    if($rowcount == 1)
    {
       echo json_encode("Yes");
    } else {
      $q =INSERT INTO storeData(col1,col2,col3,col4,
             col5,col6,col7,col8,col9,col10,col11) VALUES 
            ('$storeval1','$storeval2','$storeval3','$storeval4',
             '$storeval5','$storeval6','$storeval7','$storeval8',
             '$storeval9','$storeval10','$storeval11')";
      $r = mysqli_query($dbc,$q);
      $rows = mysqli_num_rows($r);

    if($rows == 1) {
        echo json_encode("Record Added");
    }else {
        echo json_encode("Error adding");

    }       
}
?>

如果我使用表和AJAX代码创建一个新的PHP页面，它会在页面加载时插入数据。但是当HTML代码和AJAX代码来自DB时填充相同的代码时，它会插入记录0而不是实际值。

当我打开页面时，我在控制台中看到my messageparsererror。谁能告诉我哪里出错了。