AJAX 调用后按钮大小缩小答案

【问题标题】：Button size shrinks after AJAX callAJAX 调用后按钮大小缩小
【发布时间】：2016-07-26 07:48:11
【问题描述】：

HTML如下：

<input type="button" class="button" id="addBtnId" value="Save" />
<input type="reset" class="button" id="resetBtnId" value="Reset" />

在 AJAX 调用之前，我的按钮如下所示：

在 AJAX 调用之后，我的按钮会缩小，变成这样：

AJAX：

$.ajax({
        type: "POST",
        url: saveCityUrl,
        data :  $("#cityForm").serializeObject() ,
        success: function(response){
            var cityform = $(response).find('#cityDivId').html(); 
            $('#cityDivId').html( cityform );
        }           
    });

【问题讨论】：

似乎有些类在 ajax 调用后被删除了。检查ajax调用前后的代码。
不看实际代码怎么办？可以分享一下可执行的 demo/sn-p 或者JSFiddle 吗？
相同的代码。只是表单正在重新加载。
AJAX 和 form-submit..两者是不同的事情..通常人们只希望发生一件事...
打开浏览器控制台，关注按钮元素以及 ajax 调用后会发生什么。没有看到任何代码的最大建议。

标签： javascript html css ajax

【解决方案1】：

我的猜测是你在按钮的填充上有 CSS 样式，然后当发生 Ajax 调用时，你正在用新内容替换 div 内容，但是因为它在页面加载时不在 DOM 中，即使通过它们与要替换的按钮具有相同的 id，它们不受样式规则的影响。

如果是这种情况并且您要替换 DOM 内容，您可能需要考虑对新内容进行内联样式设置。

【讨论】：

谢谢，添加内联样式有助于但是。但是如何在不添加内联的情况下保持按钮看起来不错？我的ajax代码添加到原帖中
一个想法 - 在表单之外有按钮并且不要替换它们，而是使用来自的 onclick 事件来触发表单提交和重置功能。
单独保留按钮的 css 样式并将每个属性标记为 !important。