jquery 代码可在除 ie8 之外的所有浏览器中运行

标签 jquery asp.net-mvc

这是我的场景。我正在使用 iframe 创建图像上传。情况是这样的,如果有人将鼠标悬停在该 iframe 上,则会在其上打开另一个具有两个按钮的 div。一个按钮是选择另一个图像,另一个按钮是清除 iframe 中存在的图像。

这是 View 的代码:

   @using (Html.BeginForm("Index", "LandingSetting", FormMethod.Post, new { enctype = "multipart/form-data" }))
                            {
                                @Html.ValidationSummary(true)
    <div id="menu" class="tip_trigger">
        <iframe width="731" height="335" src="@ViewData[" htmlloc "]"></iframe>
        <div id="inner" class="hover-text">
            <table>
                <tr>
                    <td width="50%" align="center" valign="middle">
                        <img id="slctbtn" src="../../Images/Landing/s_btn.PNG" />
                    </td>
                    <td width="50%" align="center" valign="middle" style="padding-left: 200px">
                        <img id="clearbtn" src="../../Images/Landing/c_btn.PNG" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
}

这是悬停的代码:
 <script type="text/javascript">
        $(document).ready(function () {
            //Tooltips
            $(".tip_trigger").hover(function () {
                tip = $(this).find('.hover-text');
                tip.show(); //Show tooltip
            }, function () {
                tip.hide(); //Hide tooltip        
            });
            //    
        });
    </script>

这是两个按钮的代码:
<script type="text/javascript">
        $(function () {
            $('#slctbtn').click(function () {
                $('#htmla').click();
            });
            $('#htmla').change(function () {
                $('form').submit();
            });
            $('#clearbtn').click(function () {
                $(this).load('@Url.Action("Clear", "LandingSetting")');
                alert('Content Cleared!');
                window.location.reload(true);
            });
        });
    </script>

注:htmla为隐藏输入类型文件

这是我的 Controller 代码:
  public ActionResult Clear()
        {
            System.IO.File.Delete(Request.MapPath("/CSS/html/imgs/ex1.jpg"));
            return RedirectToAction("Index");
        }

问题是这在 IE8 以外的其他浏览器中运行良好。 只有悬停代码在 IE8 中有效 .我需要让它专门在 IE8 中工作。有人可以帮忙吗?谢谢

注意:在 IE 中,点击事件被触发,因为我可以看到警报,但它不会触发 @url.action 方法

最佳答案

以下内容可能令人感兴趣:

Jquery trigger file input

看来您的问题是由于 click没有被触发,因为文件输入是 display:nonevisibility:hidden .您可以尝试设置 opacity:0filter:alpha(opacity = 0);取而代之的是——但是输入的点击不会被禁用——或者最好还是按照 adardesign 的建议使用屏幕外定位。

如果这不起作用,我见过的关于触发文件上传点击的其他技巧是定位输入,使其漂浮在所需按钮的顶部,然后使其不透明度淡出为 0 . 这意味着用户仍然可以访问输入的点击,但按钮的 GUI 显示通过。这确实是一个非常不雅的黑客攻击。

http://www.quirksmode.org/dom/inputfile.html

更新

鉴于上述不是您的问题,您可以尝试稍微修改一下,看看是否有任何改进:

$('#clearbtn').click(function(){
  $.ajax('@Url.Action("Clear", "LandingSetting")')
    .done(function(response){
      alert('response: '+response);
      alert('Content Cleared!');
      window.location.reload(true);
    })
    .fail(function(jqXHR, textStatus){
      alert('an error occured ' + textStatus);
    })
  ;
});

只要@Url.Action("Clear", "LandingSetting")呈现到格式正确的 URL,然后我看不出上面会有问题的原因。如果您 view source在有问题的页面上,您应该能够滚动到负责的代码并找到正在生成的 URL。如果这个 URL 存在并且 IE8 可以访问,那么问题就出在了其他地方。

可能的解释

啊,好的,所以这似乎有效。我的猜测是为什么 IE8 似乎与 alerts 存在问题。在 jQuery ajax 请求之后直接发生。我的猜测是 alert停止进程,然后在单击警报后页面将重新加载,这要归功于 window.location.reload(true);在请求有机会到达服务器之前。其他浏览器工作的原因可能是因为它们允许 ajax 调用发生,尽管有警报,因此在重新加载之前有一些额外的时间进行通信。

...解决方案,将来总是使用回调来确定ajax请求已经完成:)

关于jquery 代码可在除 ie8 之外的所有浏览器中运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15827759/

相关文章:

javascript - WordPress在WordPress中添加了jQuery完整的Calendar支持

jquery - Internet Explorer $.ajax/MVC JSON 调用失败

php - 将多个复选框插入数据库HTML PHP

javascript - 用于 AJAX(J) 书签的 location.hash 中的 JSON?

c# - 构造函数调用中的 Entity Framework StackOverflowException?很奇怪

c# - asp.net MVC自定义Authorize属性,传递参数和方法详细信息

c# - 如何在完成异步任务之前等待 24 小时?

asp.net-mvc - MVC 预览 4 - 路由表中没有路由与提供的值匹配

jquery - 使用 jsonValidationWorkflowStack 和模型驱动的 Struts 2 Ajax 验证

javascript - DOM在运行功能后不会刷新