All geek questions in one place

JQuery and Bootstrap 3: TypeError: "The object [HTMLAnchorElement object] has no" preventDefault "method,

I am working on a page with two Bootstrap 3 models in Chrome. Everything looks fine until you leave the developer console open and start one of the modals. You can repeat the problem with this jsfiddle, again with the latest Chrome, or create an html page with the code below.

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>

Edit: using jQuery selectors to trigger the modality in html fixes the problem, but you can still see the problem in jsfiddle independently.

$('#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>
+4
source share
2 answers

! 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/ - jsFiddle unminified 3.1.1 bootstrap.js( )

+5

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. , , .

0

Source: https://habr.com/ru/post/1533089/

More articles:


All Articles