模态表单只会提交和工作两次

Question

如果我第一次打开并提交通过 AJAX 提交的表单，我的模式可以正常工作。之后，如果我关闭模态框或再次提交数据，模态框将无法正常工作，因此不会发生单击提交按钮。

我做错了什么？

模态（通过ajax加载表单）

<div class="modal fade" id="settings" role="basic" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img src="../../../assets/global/img/loading-spinner-grey.gif" alt="" class="loading">
                <span> &nbsp;&nbsp;Daten werden geladen - bitte warten... </span>
            </div>
        </div>
    </div>
</div>

带有表单的最终模态

<div class="modal-body">
    <h4>Kundennummer</h4>
        <div>
            <form id="userForm_settings" method="post">                                    
                <div class="form-group form-inline ">
                    <label>Startwert</label>
                    <input class="form-control input-sm" id="form_KD_NO_START" name="KD_NO_START" value="55" placeholder="Bsp. 10001" type="text">
                </div>    
                <p><a class="btn green-meadow save_button" href="#" id="settings"><i class="fa fa-refresh"></i> speichern</a></p>
                <input name="DS" value="3" type="hidden">
                <input name="step" value="update" type="hidden">
            </form>                                    
        </div>
        <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn dark btn-outline">schließen</button>
        </div>
    </div>
    <script src="../../../module/1/code/js_modals.php?lang=de" type="text/javascript"></script>

这里是JS代码：

enter $(function(){ 
    //MiniColors
    $('.demo').each(function() { $(this).minicolors({ theme: 'bootstrap' }); });                                    

    //Formularhaendling
    //$.post( "kontaktgruppen.php", $( "#userForm" ).serialize() );

    //$('#save').click(function () { 
    $('.save_button').click(function () { 
        alert("you've click");
        var  formID = $(this).attr('id');
        var formDetails = $('#userForm_'+formID);
        //alert("ID"+formID);

        if (formID=='settings') {
            var fileurl='settings.php'; 
        } else { 
            var fileurl='kontaktgruppen.php';
        }

        // $('#modalOne').on('hide.bs.modal', function () {
        // tinyMCE.editors=[];
        // });

        // $('.modal-body').html(data).promise().done(function () {

        $.ajax({
            url: fileurl,
            type: "post",
            //cache: false,
            //dataType: "html",           
            //data: $( "#userForm" ).serialize(),
            //data: $( "input, textarea, select" ).serialize(),
            //data: $(this).parent().serialize()
            //data: $(this).serialize(),
            data: formDetails.serialize(),
            //data: $( "input, textarea, select" ).serialize(),
            error: function(jqXHR, textStatus, errorThrown) {
                displayAjaxMessage("Sorry, there was an error");
            },
            success: function (result) {
                var res = $.parseJSON(result);

                if (formID=='settings') { 
                    $("#settings .modal-body").html(res.content); 
                } else { 
                    $("#kontaktgruppen .modal-body").html(res.content); 
                }

            if (res.code==10) {
                toastr.options = {  "closeButton": true,  "positionClass": "toast-top-right",    "showDuration": "1500" }
                toastr.success("", "<?php echo $lang['mod1'][33]; ?>");
            }

            if (res.code==30) {
                toastr.options = {  "closeButton": true,  "positionClass": "toast-top-right",    "showDuration": "1500" }
                toastr.success("", "<?php echo $lang['mod1'][39]; ?>"); 
            }

            if (res.code==99) {
                toastr.options = {  "closeButton": true,  "positionClass": "toast-top-right",    "showDuration": "1500" }
                toastr.error("<?php echo $lang['mod1'][35]; ?>", "<?php echo $lang['mod1'][34]; ?>");
            }


            //location.reload(); //Reload der ganzen Seite
            //$("#kontaktgruppen").load("kontaktgruppen.php");
            //$("#kontaktgruppen .modal-title").text('Aktualisiert');    
       }
   });       
});  


$(".delete_group").click(function(){    
    var del_id = $(this).attr('id');
    $.ajax({
        type:'POST',
        url:'kontaktgruppen.php',
        data:'delete_id='+del_id,
        success:function(result) {
            var res = $.parseJSON(result);
            $("#kontaktgruppen .modal-body").html(res.content);
            if (res.code==20) {   
                toastr.options = {  "closeButton": true,  "positionClass": "toast-top-right",    "showDuration": "1500" }
                toastr.warning("", "<?php echo $lang['mod1'][36]; ?>");
            } else { 
                toastr.options = {  "closeButton": true,  "positionClass": "toast-top-right",    "showDuration": "1500" }
                toastr.error("", "<?php echo $lang['mod1'][37]; ?>");
            }
        }
    });
}); 

//Reset the modals
//$('#settings').on('hidden.bs.modal', function () {
    //$(this).removeData('bs.modal');
    //$(this).empty();
    //$(this).removeAttr('style');
//});
});

Answer 1

而不是处理元素上的事件

 $('.save_button').click(function () { ....

你应该在文档级别处理它

$(document).on('.save_button','click',function(){  ...

这样，如果您重新加载表单而不重新加载整个窗口，即部分重新加载，事件将从文档传播到目标

或者更具体而不是文档，您可以使用表单的包装标签，如果重新加载表单，该标签将不会重新呈现。