twitter-bootstrap 接收错误 0x800a01b6 - JavaScript 运行时错误：对象不支持属性或方法“模态”，当使用 Bootstrap 3 模态时
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22591653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Receiving error 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal', when using Bootstrap 3 modal
提问by teatime
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 中运行良好。
回答by webeno
Your button misses the data-toggleand data-targetattributes, it should look like this:
您的按钮缺少data-toggle和data-target属性，它应该如下所示：
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="new">New</button>
Source: JavaScript Bootstrap
回答by teatime
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.
好吧，经过一番折腾之后，我在添加最后一条评论时有一个恍惚的时刻。它适用于其他浏览器而不是 Internet Explorer。所以我开始研究 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.
无论如何，希望这会在其他人像我一样用头撞墙之前对其有所帮助。
回答by soobow
When I had the same problem it turned out to be an unneccessary reference to a jquery bundle in my .cshtml page.
当我遇到同样的问题时，结果是对我的 .cshtml 页面中的 jquery 包的不必要引用。
