Question

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

<!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>

Answer 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激活 - ＆gt; http://jsfiddle.net/QFyv9/ - 分叉jsFiddle使用3.1.1 bootstrap.js的未分解版本（所以我可以追踪问题）

Answer 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>

并将bootstrap从3.1.1升级到3.2.0。错误消失了，它按照编码的方式切换两次。

jQuery和Bootstrap 3：TypeError：“Object [object HTMLAnchorElement]没有方法'preventDefault'

2 个答案: