如何使用ajax插入的按钮和输入字段？

Question

以下是我尝试的简化示例： 当用户在第一个显示的名为“wz”的表单字段中输入大于 0 的数字时，ajax 将插入一个带有按钮的新表单。当输入大于 0 的数字时，将插入另一个带有另一个按钮的表单。

第一个 ajax 调用运行良好，但插入按钮和新输入字段出现问题。一个输入字段是只读的，只保存实际日期时间的值（稍后用于 sql db..），另一个用于输入 Initials。

当在输入字段“abbau_ma”中没有输入姓名首字母并单击 ABBAU 按钮时，ajax 调用会在 id="ajax-abbau" 的第二个消息区域中显示日期时间和“wz”的值。如果额外输入姓名首字母，则页面将重新加载，并且不会显示错误或数据！？。

这是简化的代码：

index.php:

<div class="container ">
    <div class="row">
        <div class="container">
            <form id="my-form" action="" novalidate="" method="post">
                <div class="row">
                    <div class="form-group col-6 col-lg-4">
                        <label for="wz" class="form-control-label">Werkzeug-Nr.</label>
                        <input type="text" name="wz" class="form-control form-control-lg col-12" minlength="1" maxlength="5" pattern="\d*" placeholder="123-1" autofocus required>
                    </div>
                    <div class="form-group col-6 col-lg-4">
                        <button type="submit" class="btn btn-lg btn-info border btn-search col-12" style="margin-top:32px"><i class="fas fa-search"></i><b></b></button>
                    </div>
                </div>
            </form> 
        </div>
        
        <div class="col-12 col-lg-8">
            <div class="card bg-light" style="margin-top:20px">
                <div class="card-body text-left">
                    <p class="card-text" id="input-fields">Place for the (search-)ajax-result</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-8">
            <div class="card bg-light" style="margin-top:20px">
                <div class="card-body text-left">
                    <p class="card-text" id="ajax-abbau">Place for the 2nd ajax-result</p>
                </div>
            </div>
        </div>
    </div>
</div>

index.php的js部分：

<script>

$(document).ready(function() {
    $("#my-form").submit(function(e) {
        e.preventDefault();
        $.ajax( {
            url: "wz-produktion-input-fields.php",
            method: "post",
            data: $("form").serialize(),
            dataType: "text",
            success: function(strMessage1) {
                $("#input-fields").html(strMessage1);
                console.log(strMessage1);
                //$("#my-form")[0].reset();
            }
        });
    });
});
function myFunctionABBAU() {
  //alert("ABBAU button clicked");
    $.ajax( {
        url: "abbau_sql.php",
        method: "post",
        data: $("form").serialize(),
        dataType: "text",
        success: function(strMessage1) {
            $("#ajax-abbau").html(strMessage1);
            console.log(strMessage1);
            //$("#my-form")[0].reset();
        }
    });
};
</script>

wz-produktion-input-fields.php

<?php
header('Content-type: text/html; charset=utf-8');
error_reporting (E_ALL);
ini_set ('display_errors', 'On');

$wz             =   $_POST['wz'];
$datetimenow    =   date('Y-m-d H:i');


if ($wz > 0) 
{
    //$form_ist_aufgebaut = "true";
    echo nl2br("<div class='' id='aufbau_abbau_inputs'>");
        echo nl2br("<form id='my-form' action='' method='post'>");
            echo nl2br("<div class='row'>");
                echo nl2br("<div class='form-group col-6 col-lg-4'>");
                    echo nl2br("<label for='abbau_ma' class='form-control-label'>Enter Initials</label>");
                    echo nl2br("<input type='text' name='abbau_ma' class='form-control form-control-lg col-12' minlength='1' maxlength='2' placeholder='z.B. LK' required>");
                echo nl2br("</div>");
                echo nl2br("<div class='form-group col-6 col-lg-4'>");
                    echo nl2br("<input type='text' name='abbau' class='form-control form-control-lg col-12 text-danger' value='$datetimenow' readonly>");
                echo nl2br("</div>");
                echo nl2br("<button onclick='myFunctionABBAU()' id='ab-bau' class='btn btn-lg btn-success col-12'>Abbau</button>");
            echo nl2br("</div>");
        echo nl2br("</form>");
    echo nl2br("</div>");
}
else 
{
    //$form_ist_aufgebaut = "false";
    echo nl2br("<button onclick='myFunctionAUFBAU()' class='btn btn-lg btn-info col-12'>Aufbau</button>");
    
}

?>

abbau_sql.php：

<?php
header('Content-type: text/html; charset=utf-8');
error_reporting (E_ALL);
ini_set ('display_errors', 'On');
    
$wz                 =   $_POST['wz'];
$abbau              =   $_POST['abbau'];
$abbau_ma           =   $_POST['abbau_ma'];

echo nl2br("$wz" . "\n");                       
echo nl2br("$abbau" . "\n");
echo nl2br("$abbau_ma" . "\n");
?>

Answer 1

根据评论解决方案更新答案： 添加了 function(e) 以使用上述代码。

 $(document).on("submit", "#my-form", function(e){
   //Code: Action (like ajax...)
 })

而不是

$("#my-form").submit(function(e) {