jquery 代码适用于除 ie8 之外的所有浏览器

Question

这是我的场景。我正在使用 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 方法

Answer 1

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

Jquery trigger file input

您的问题似乎是由于文件输入为 display:none 或 visibility:hidden 导致 click 未触发。您可以尝试设置 opacity:0 和 filter:alpha(opacity = 0); - 但是输入的点击不会被禁用 - 或者最好仍然使用离屏定位作为adardesign 建议。

如果这不起作用，我见过的关于触发文件上传点击的其他技巧是定位输入，使其漂浮在所需按钮的顶部，然后使其不透明度褪色out 为 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，那么我认为上述内容没有理由出现问题。如果您在相关页面上查看源代码，您应该能够滚动到负责的代码并找到正在生成的 URL。如果此 URL 存在并且 IE8 可以访问，则问题是其他问题。

可能的解释

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

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