使用 .val('') 重置字段后，表单字段为空，直到页面重新加载答案

【问题标题】：After reset fields with .val(''), the form fields are empty until the page will be reloaded使用 .val('') 重置字段后，表单字段为空，直到页面重新加载
【发布时间】：2016-11-11 00:10:25
【问题描述】：

在我的文档中，我使用 Bootstrap Modal 动态加载文档。在这个模态窗口中，我使用 ajax 将两个表单字段的值添加到数据库中。成功请求后，我重置了使用 .val('') 提交的两个表单。这工作正常，但是当我关闭模态窗口并再次打开它时，每次表单字段都是空的。只有当我重新加载页面并打开模态时，一切正常。

错误在哪里？两个表单域的重置是针对整个会话，直到我重新加载页面。

这是我的 ajax 代码：

        $(document).on('click', 'form.form-inline button', function(e) {

        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        var pMacaddr = $('#macaddr').val();
        var pHostname = $('#hostname').val();

        var that = $(this);

        $.ajax({
            async: true,
            type: 'POST',
            url: propertie.backend+'?action=ajax&method=addmac&lang='+propertie.language+'&code='+Math.random(),
            dataType: 'json',
            data: {
                'hostname': pHostname,
                'macaddr': pMacaddr,
            },error: function(data) {
                alert('PHP-Error: '+data['responseText']);
            },success: function(data) {
                if (data.success === false) {
                    alert(data.message);
                } else {

                    var html = "<tr id=\""+pId+"\">\n";
                        html += "\t<td>"+pMacaddr+"</td>\n";
                        html += "\t<td>"+pHostname+"</td>\n";
                        html += "\t<td><a href=\"javascript:void(0);\" title=\""+propertie.l10n.delete+"\">";
                        html += "<i class=\"fa fa-close fa-fw\"></i></a><a href=\"javascript:void(0);\"";
                        html += " title=\""+propertie.l10n.edit+"\"><i class=\"fa fa-pencil fa-fw\"></i></a></td>\n</tr>\n";

                        $(that).closest("tr").before(html);

                        $('#macaddr').val('');
                        $('#hostname').val('');

                }
            },cache: false,
        });

    });

要打开模态，我使用以下代码：

        $(document).on('click', '[data-toggle="ajaxModal"]', function(e) {
        $('#ajaxModal').removeData('bs.modal');
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        var $this = $(this)
        , $remote = $this.data('remote') || $this.attr('href')
        , $modal = $('<div class="modal fade" id="ajaxModal"><div class="modal-dialog"><div class="modal-content"></div></div></div>');
        $('body').append($modal);
        $modal.modal({remote: $remote});
        $modal.modal('show');
    });

【问题讨论】：

标签： jquery ajax

【解决方案1】：

我发现了我的错误。 Modal 元素只是被隐藏了，没有从文档中移除。我已经修改了我的 Open-Modal 功能，现在当我关闭 Modal 时，Modal 窗口将从文档中删除。

        // open modal
    $(document).on('click', '[data-toggle="ajaxModal"]', function(e) {

        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        var $this = $(this)
        , $id = $this.data('id') || 'ajaxModal'
        , $remote = $this.data('remote') || $this.attr('href')
        , $modal = $('<div class="modal fade" id="'+$id+'" role="dialog"><div class="modal-dialog"><div class="modal-content"></div></div></div>');

        $('body').append($modal);
        $modal.modal({remote: $remote, keyboard: false, backdrop: false});
        $modal.modal('show');

        // On hidden event, remove the current modal from document
        $(document).on('hidden.bs.modal', '#'+$id, function(e) {
            $(this).remove();
        });

    });

现在表单字段可以与 val() 一起使用。

【讨论】：