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 つのエラーがありますが、Chrome に表示されるのは 2 つだけです。私が試した他のブラウザはすべて正常に動作します。devtools を開いて閉じるか、1 秒間ズームインおよびズームアウトすると、予期したとおりにエラーが表示されます。

$('.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 に答える