0

我有一个默认隐藏一些错误的表单。这是 CSS（手写笔）：

span.error
  display: none
  position: relative
  padding: .25em .5em
  width: 75%
  margin-top: 5px
  margin-bottom: 15px
  float: right
  text-align: center
  background: myorange
  border-radius: radius
  &:after
    arrow(6px)
    top: -12px
    left: 50%
    margin-left: -12px
    border-bottom-color: myorange

然后在 jQuery 中，我想在 AJAX 回调中显示错误，所以：

$form.submit(function(e) {
  e.preventDefault();

  $.post($form.attr('action'), $form.serialize(), function(data) {
    // handle ajax then show errors
    $('.error').show(); // doesn't work properly here, only 2 show up
  });
});

我遇到的问题很奇怪。我有 6 个错误，但只有 2 个出现在 Chrome 中。我尝试过的所有其他浏览器都可以正常工作。如果我打开和关闭 devtools 或放大和缩小一秒钟，那么错误会按预期显示。

我发现如果我把事件放在$('.errors').show() 外面，submit那么它会按预期工作，所有 6 个错误都会出现。

$('.error').show(); //works here

$form.submit(function(e) {
  e.preventDefault();
  ...
});

我还发现，如果我删除，float:right那么 Chrome 中的一切都可以正常工作，但我显然需要这个属性。我尝试用我找到的一些 解决方案触发重绘，但到目前为止还没有运气。被困了几个小时......关于如何解决这个问题的任何想法？

4

1 回答 1

1

所以我找到了解决方案。事实证明，如果我浮动所有元素，包括标签和输入，那么当错误浮动时它也可以正常工作，否则，如果它周围没有其他浮动，那么它不会刷新，除非你触发回流调整窗口大小或放大和缩小等。

最奇怪的是它在提交处理程序之外工作得很好，但在内部却不行，这就是让我发疯的原因，但无论如何我现在都可以使用浮点数了。我确定这一定是一个错误，因为它甚至可以在 IE 中工作，但我无法在小提琴上重现它......

于 2013-05-11T23:01:46.973 回答