Question

我正在基于某些下拉菜单通过 ajax 显示表单。用户可以在一个下拉列表中选择类，在另一个下拉列表中选择主题，然后返回该类中的学生列表。

这是以类似的方式形成的，允许用户输入学生已经获得的分数。这是用户选择其首选项后表单的外观：

我想在点击保存按钮时，在用户输入分数后，应将其发送到数据库。 问题是：因为我每次点击按钮时都会通过 ajax 返回记录。对于基本测试，我尝试显示一个javascript警报，并在单击按钮时将消息记录到控制台，但是当我尝试时没有任何反应。

这是我的代码的外观:(脚本）

 <script>
   $(document).ready(function() {
     $('#subject_id').on('change', function(){
      var subject_id = $('#subject_id').val();
      var class_id = $('#class_id').val();
      var term = $('#term').val();

    if (subject_id != '' || class_id != '') {
      $.ajax({
        url:"includes/ajax/read_student_score_form.php",
        method:"post",
        data:{"subject":subject_id, "class":class_id, "term":term},
        dataType:"text",
        success:function(data){
          $("#result").html(data);
        }
      });
    } else {
      $("#result").html('');

    }   
}); 

$('#class_id').on('change', function(){
    var subject_id = $('#subject_id').val();
    var class_id = $('#class_id').val();
    var term = $('#term').val();

    if (subject_id != '' || class_id != '') {
      $.ajax({
        url:"includes/ajax/read_student_score_form.php",
        method:"post",
        data:{"subject":subject_id, "class":class_id, "term":term},
        dataType:"text",
        success:function(data){
          $("#result").html(data);
        }
      });
    } else {
      $("#result").html('');
    }   
});

$('#term').on('change', function() {
  /* Act on the event */
    var subject_id = $('#subject_id').val();
    var class_id = $('#class_id').val();
    var term = $('#term').val();

    if (subject_id != '' || class_id != '') {
        $.ajax({
          url:"includes/ajax/read_student_score_form.php",
          method:"post",
          data:{"subject":subject_id, "class":class_id, "term":term},
          dataType:"text",
          success:function(data){
            $("#result").html(data);
          }
        });
    } else {
      $("#result").html('');
    }   
}); 


// testing is done down here
$(document).on('submit', '#st_score_form', function(event) {
    event.preventDefault();

    // this is where I'm testing if the button is working
    alert("Button click");
    console.log("Button click");

});
});
</script>

这是返回表单的文件（包括/ ajax / read_student_score_form.php）

if (mysqli_num_rows($result) > 0) {
    # code...
    $output .= '<h4 align="center">Periodic Report</h4>';
    $output .= '<div class="table-responsive">

                    <table class="table table-bordered">
                        <tr>
                            <th scope="row" colspan="1">Subject</th>
                            <td colspan="5">'.$subject["subject_name"].'</td>

                            <th scope="row">Class</th>
                            <td>'.$class['class_name'].'</td>

                            <th scope="row">Period</th>
                            <td>'.$period.'</td>
                        </tr>';
        $output .= '</table>';
        $output .= '<table class="table table-bordered table-condensed table-responsive table-striped">
                        <thead>
                            <tr>
                                <th>Student</th>
                                <th>Score</th>
                                <th>Operations</th>
                            </tr>
                        </thead>';
            $output .= '<tbody>';
                while ($row = mysqli_fetch_array($result)) {
                    # code...
                    $output .= '<form action="#" method="post" id="st_score_form">';
                        // unseen post values that will be send
                        $output .= '<tr style="display: none;">';
                            $output .= '<td><input type="text" name="student_id" value="'.$row['student_id'].'"></td>';
                            $output .= '<td><input type="text" name="subject_id" value="'.$subject_id.'"></td>';
                            $output .= '<td><input type="text" name="class_id" value="'.$class_id.'"></td>';
                            $output .= '<td><input type="text" name="term" value="'.$term.'"></td>';
                        $output .= '</tr>';
                        // -- end of unseen post values

                        $output .= '<tr>';
                            $output .= '<td>'.$row["first_name"]." ".substr($row["middle_name"], 0, 1).". ".$row["surname"].'</td>';
                            $output .= '<td><input type="number" min="59" max="100"  name="score" class="form-control"></td>';
                            $output .= '<div class="form-group">';
                            $output .= '<td><input type="submit" name="savebtn" id="savebtn" value="Save" class="btn btn-info form-control"></td>';
                            $output .= '</div>';

                        $output .= '</tr>';
                    $output .= '</form>';
                }
            $output .= '</tbody>';
        $output .= '</table>';
    $output .= '</div>';            
    echo $output;
} else {
    echo "Data not found";
}

我愿意提供有关如何使其发挥作用的反馈和建议。感谢!!!

Answer 1

JS生成的DOM元素不再由您的代码触发。您必须创建一个文档事件，以便JS生成的DOM元素能够正常运行。

List

**编辑**

也许我会给你一个小例子，我打算如何编写你的代码。你遇到的问题是，如果用JS / jQ创建一个元素，你的DOM已经用你的javascript / jquery代码解析了，它不能识别你新创建的DOM。

这很好用：

$(document).on('event','selector',callback_function)

不工作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    $(document).on('click', '#st_score_form', function(event) {
        event.preventDefault();
        alert("Button click");
    });

    $('body').append('<button id="st_score_form">Testbtn</button>');
});
</script>

<html>
<head></head>
<body>
    No content
</body>
</html>

使用ajax返回表单后，Button将无法工作

1 个答案: