AJAX表单只能在IE9中使用一次

Question

我正在编写一个简单的脚本，该脚本通过ajax将注册表单提交到我的网站。 它在现代浏览器中完美运行。 在IE9中，表单仅提交一次。 然后，如果我尝试再次提交相同的表单，则第二次该表单永不返回，并且加载程序gif永久保留。 知道为什么会这样吗？

编辑：我应该指出，我正在使用此jquery表单插件来提交表单。 其次，当我在提交表单后检查源代码时，正确的标记在那里。 我可以手动添加不透明度样式来显示表单，因此我认为这表明问题与IE9和jquery淡入淡出功能有关。

    <script type="text/javascript">

    jQuery.fn.outerHTML = function(s) {
    return (s)
      ? this.before(s).remove()
      : jQuery("<p>").append(this.eq(0).clone()).html();
    }

    jQuery(document).ready(function($){

        $("form input").removeAttr('tabindex');

        ajaxregister = function(e) {
            e.preventDefault();
            $(this).fadeTo(500, 0);
            $(this).siblings("#loading").fadeIn();
            $(this).ajaxSubmit({
                //url:'http://streetofwalls.dev/wp-login.php?action=register'
                success: function( data ) {
                    //console.log(data);

                    var $message = $(data).find('.message').outerHTML();
                    var $error = $(data).find('#login_error').outerHTML();
                    var $form = $(data).find('#registerform').outerHTML();
                    console.log( 'success' );

                    $(e.target).html( ( ($error) ? $error : $message ) + $form ).fadeTo(500,1);
                    $(e.target).siblings("#loading").fadeOut();

                }
            });
        }

        $(".widget_reg_widg #registerform").submit( ajaxregister );
    });
    </script>

Answer 1

在某些IE浏览器中，必须重新定义事件变量：

ajaxregister = function(e) {
        e = e || window.event;
        e.preventDefault();
...
}

Answer 2

在您的jquery代码中使用cache:false 。

范例：

$(this).ajaxSubmit({
    cache : false,
    //existing code
});

Answer 3

我通过用jquery选择器替换e.target来使其工作。 参见成功的最后几行：function（）{...

                success: function( data ) {

                    var $message = $(data).find('.message').outerHTML();
                    var $error = $(data).find('#login_error').outerHTML();
                    var $form = $(data).find('#registerform').outerHTML();

                    var target_id = $(e.target).attr("id");
                    $("#"+target_id).html( ( ($error) ? $error : $message ) + $form ).animate({opacity:1}, 500);
                    $("#"+target_id).css('display', 'block');

                    $("#"+target_id).siblings("#loading").css('display', 'none');

                }

不知道为什么这样做。 它必须与IE9引用事件的方式有关。