I have created a simple MVC 5 project to demonstrate the issue I had using Visual Studio 2013 (New > Project > ASP.NET Web Application (4.5) > Empty (MVC)).
我创建了一个简单的MVC 5项目来演示我使用Visual Studio 2013(新的>项目> ASP)遇到的问题。NET Web应用程序(4.5)>空(MVC)。
I then created the a basic controller and action for a simple view:
然后我为一个简单的视图创建了一个基本的控制器和操作:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
With the following View (Index.cshtml)
使用以下视图(Index.cshtml)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div>
<button type="button" class="btn btn-primary" id="new">New</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//$('#myModal').modal();
$('#new').click(function () {
$('#myModal').modal();
});
});
</script>
</body>
</html>
The problem I have is: when the page is first loaded and I click on the button to display the modal, I receive the following error:
我的问题是:当页面第一次加载时，我点击按钮以显示模式，我收到以下错误:
However, if I refresh the page and click the button again it works fine.
但是，如果我刷新页面并再次单击按钮，它会正常工作。
Also if I uncomment the line //$('#myModal').modal(); and restart the project, the modal is immediately opened as expected, but clicking the button still causes the error above.
如果我取消注释行//$('#myModal').modal();并且重新启动项目，模态会按预期立即打开，但是点击按钮仍然会导致上面的错误。
I'm sure this is probably something simple and a school boy error on my side but for the life of me I can't figure out what is going on or how to diagnose the issue.
我相信这很可能是一个简单的问题，我身边的一个学生犯了一个错误，但我的一生都搞不清楚到底发生了什么，也搞不清楚如何诊断这个问题。
Anyway any help is much appreciated and I would be interested to know if anyone else can replicate the issue.
无论如何，非常感谢任何帮助，我很想知道是否有其他人可以复制这个问题。
Edit: Strangely enough this seems to only happen in Internet Explorer (11), and seems to work fine in Chrome and Firefox.
编辑:奇怪的是，这似乎只发生在Internet Explorer(11)中，而且在Chrome和Firefox中似乎运行良好。
3 个解决方案
#1
2
Your button misses the data-toggle and data-target attributes, it should look like this:
您的按钮会忽略数据切换和数据目标属性，应该如下所示:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="new">New</button>
Source: JavaScript Bootstrap
来源:JavaScript引导
#2
1
OK, after much messing about, I had a eureka moment when adding my last comment. It works in other browsers and not Internet Explorer. So I started looking at what was different about Internet Explorer and it turns out I hadn't removed the Avast On-line Security Extension.
好吧，在弄得一团糟之后，我在添加最后一条评论时，有了一个惊喜的时刻。它适用于其他浏览器，而不是ie浏览器。所以我开始研究Internet Explorer的不同之处，结果发现我并没有删除Avast在线安全扩展。
So disabling this caused my JavaScript to load as expected and its all fine now (I had already removed from Chrome before starting this development).
因此，禁用此功能使我的JavaScript按预期加载，现在一切正常(在开始开发之前，我已经从Chrome中删除了)。
Anyway hopefully this will help someone else before they bang their head against the wall as I did.
不管怎样，希望这能帮助别人在他们像我一样撞到墙上之前。
#3
1
When I had the same problem it turned out to be an unneccessary reference to a jquery bundle in my .cshtml page.
当我遇到同样的问题时，结果是在我的.cshtml页面中对jquery bundle的不必要引用。
#1
2
Your button misses the data-toggle and data-target attributes, it should look like this:
您的按钮会忽略数据切换和数据目标属性，应该如下所示:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="new">New</button>
Source: JavaScript Bootstrap
来源:JavaScript引导
#2
1
OK, after much messing about, I had a eureka moment when adding my last comment. It works in other browsers and not Internet Explorer. So I started looking at what was different about Internet Explorer and it turns out I hadn't removed the Avast On-line Security Extension.
好吧，在弄得一团糟之后，我在添加最后一条评论时，有了一个惊喜的时刻。它适用于其他浏览器，而不是ie浏览器。所以我开始研究Internet Explorer的不同之处，结果发现我并没有删除Avast在线安全扩展。
So disabling this caused my JavaScript to load as expected and its all fine now (I had already removed from Chrome before starting this development).
因此，禁用此功能使我的JavaScript按预期加载，现在一切正常(在开始开发之前，我已经从Chrome中删除了)。
Anyway hopefully this will help someone else before they bang their head against the wall as I did.
不管怎样，希望这能帮助别人在他们像我一样撞到墙上之前。
#3
1
When I had the same problem it turned out to be an unneccessary reference to a jquery bundle in my .cshtml page.
当我遇到同样的问题时，结果是在我的.cshtml页面中对jquery bundle的不必要引用。