【问题标题】:IE8 only submits with button, not submit?IE8只用按钮提交,不提交?
【发布时间】:2011-04-07 14:42:28
【问题描述】:

所以,这很奇怪,大约一个月前,在我进行大量代码更新之前,它对我有用。无论如何,问题是实时提交处理程序甚至不会在 IE8 中运行,但是,如果我在单击按钮时运行它,它就可以工作。见下文:

HTML

        <label>Add Attachment</label>
        <form class="file_upload" method="post" enctype="multipart/form-data" target="upload_target" action="">
            <input name="binary" id="file" size="27" type="file" /><br />
            <br><input type="submit" name="action" value="Upload" /><br />
            <input type="button" class="test" value="test">
            <iframe class="upload_target" name="upload_target" src="" style=""></iframe>
        </form>
        <label>Attachments</label>
        <ul class="upload_output">
        <li class="nofiles">(No Files Added, Yet)</li>
        </ul>

JavaScript:

function file_upload($theform,item_id){
    $theform.attr('ACTION','io.cfm?action=updateitemfile&item_id='+item_id);
    if($theform.find('[type=file]').val().length > 0){
        $('iframe').one('load',function(){
            $livepreview.agenda({
                action:'get',
                id:item_id,
                type:'item',
                callback:function(json){
                    $theform.siblings('.upload_output').append('<li style="display:none" class="file-upload"><a target="blank" href="io.cfm?action=getitemfile&item_file_id='+json[0].files.slice(-1)[0].item_file_id+'">'+json[0].files.slice(-1)[0].file_name+'</a> <a style="color:red" title="Delete file?" href="#deletefile-'+json[0].files.slice(-1)[0].item_file_id+'">[X]</a></li>').children('li').fadeIn();
                    $theform.siblings('.upload_output').find('.nofiles').remove();
                }
            });
            //Resets the file input. The only way to get it cross browser compatible as resetting the val to nothing
            //Doesn't work in IE8. It ignores val('') to reset it.
            $theform.append('<input type="reset" style="display:none">').children('[type=reset]').click().remove();
        });
    }
    else{
        $.alert('No file selected');
        return false;
    }
}
/* FILE UPLOAD EVENTS */
//When they select "upload" in the modal
$('.file_upload').live('submit',function(event){
    alert('hello world');
    file_upload($('.agenda-modal .file_upload'),$('.agenda-modal').attr('data-defaultitemid'));
});
/* This is the code that makes it work..., but i dont want it! it should alert hello world on the submit button! */
$('.test').live('click',function(event){
    $('.file_upload').submit();
});

【问题讨论】:

  • 只是一个快速的健全性检查 - 所有的 url 都由同一个域提供服务吗? ie8 带来了一些更好的 XSS 防御,因此可以更严格地执行相同的来源策略......
  • 是的 :( 都是同一个域...就像我说的,当您按下按钮时它可以工作,而不是提交...

标签: javascript jquery html ajax file-upload


【解决方案1】:
  1. 而不是创建重置按钮,模拟点击事件并销毁它 - 为什么不只是

    $('.file_upload').reset();
    
  2. 您真的需要live 来提交表单吗?如果按钮一直停留在 DOM 中,则使其使用正常的点击事件,如

    $('.test').click(function(){
        $('.file_upload').submit();
    });
    

【讨论】:

  • 重置在 IE8 中根本不起作用。只是把它放在那里。相信我...我认为这是一个丑陋的黑客,但 .reset() 什么也没做。表格不是静态的。表单是从 DOM 中的一种“模板”自动生成的,它被克隆和操作,然后放置在模态框内。
【解决方案2】:

这是设计使然,与 IE 8 完全无关。在所有浏览器中一直如此。

如果您调用submit 方法,submit 事件不会发生,只有在您使用提交按钮提交表单时才会发生。

【讨论】:

  • 那么...我该如何解决这个问题?它正在工作,嗯,在我进行代码更新之前,实时提交正在工作,我可以隐藏提交按钮并制作一个 input type="button" 按钮并拥有那个点击处理程序,它只是丑陋......
猜你喜欢
  • 2011-05-06
  • 2011-06-29
  • 1970-01-01
  • 2016-05-12
  • 1970-01-01
  • 1970-01-01
  • 2018-06-30
  • 1970-01-01
  • 2014-03-23
相关资源
最近更新 更多