jQuery 和 Bootstrap 3: TypeError: "Object [object HTMLAnchorElement] has no method 'preventDefault'答案

【问题标题】：jQuery and Bootstrap 3: TypeError: "Object [object HTMLAnchorElement] has no method 'preventDefault'jQuery 和 Bootstrap 3: TypeError: "Object [object HTMLAnchorElement] has no method 'preventDefault'
【发布时间】：2014-05-01 02:21:28
【问题描述】：

我正在处理一个在 Chrome 中包含两个 Bootstrap 3 模式的页面。在您打开开发人员控制台并启动其中一个模式之前，一切看起来都很好。您可以使用此 jsfiddle 重复此问题，再次使用最新的 Chrome，或使用以下代码创建一个 html 页面。

http://jsfiddle.net/ow3n/22ENG/

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">

function launchReportModal(){
    $('#reportModal').modal();
}
function launchShareModal(){
    $('#shareModal').modal();
}
</script>
</head>
<body>

<a href='#reportModal' onclick='launchReportModal()' class='report_link' data-toggle='modal' data-target='#reportModal'>report</a>

<a href='#shareModal' onclick='launchShareModal()' class='report_link' data-toggle='modal' data-target='#shareModal'>share</a>

<div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="reportModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">Report <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button></div>
            <div class="modal-body"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

<div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">Share <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button></div>
            <div class="modal-body"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>
</body>
</html>

编辑：使用 jQuery 选择器在 html 中启动模式修复了该问题，但无论如何您仍然可以在 jsfiddle 中看到该问题。

$('#launchReportModal').on('click', function(){
    $('#reportModal').modal();
});
$('#launchShareModal').on('click', function(){
    $('#shareModal').modal();
});

<a href='#' id='launchReportModal' data-toggle='modal' data-target='#reportModal'>report</a>

<a href='#' id='launchShareModal' data-toggle='modal' data-target='#shareModal'>share</a>

【问题讨论】：

标签： javascript jquery twitter-bootstrap modal-dialog

【解决方案1】：

您正在尝试自动激活模式和同时手动激活它们！如果您阅读docs：

无需编写 JavaScript 即可激活模式。设置 data-toggle="modal" 在控制器元素上，例如按钮，以及 data-target="#foo" 或 href="#foo" 将特定模式定位到切换。

两个都有

<a href='#' id='launchReportModal' data-toggle='modal' data-target='#reportModal'>report</a>

和

$('#launchReportModal').on('click', function(){
    $('#reportModal').modal();
});

错误是这样触发的：

$.fn.modal (_relatedTarget)
   Modal.toggle (_relatedTarget)
       Modal.hide (_relatedTarget)

_relatedTarget 在代码中被视为一个事件：

Modal.prototype.hide = function (e) {
    if (e) e.preventDefault()
       -> Uncaught TypeError: Object http://fiddle.jshell.net/22ENG/2/show/# has no method 'preventDefault'

但是 _relatedTarget 不是一个事件，它是一个元素。显然data-target 的排名高于您的$(element).modal() 代码。

解决方案：只需跳过模态框的 javascript 激活 -> http://jsfiddle.net/QFyv9/ - 使用未缩小版本的 3.1.1 bootstrap.js 分叉 jsFiddle（这样我就可以追踪问题）

【讨论】：

太棒了！谢谢你。文档不清楚您不应该同时使用两者。我应该注意到使用 jQuery 选择器的区别是一个线索。使用未缩小的 bootstrap.js 也是不错的调试技巧。

【解决方案2】：

我更新了 jsfiddle 演示： http://jsfiddle.net/22ENG/11/

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

并将引导程序从 3.1.1 升级到 3.2.0。错误消失了，它切换了两次，如代码所示。

【讨论】：