引导模式按钮点击事件没有在第一次触发

bootstrap modal button click event not fired on first time

本文关键字：第一次 事件 模式 按钮      更新时间：2023-09-26

我是twitter bootstrap的新手。我正在使用bootstrap 3这是我的HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Samples</title>
<script src="scripts/jquery1.10.2.min.js"></script>
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-3.1.1-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-3.1.1-dist/css/bootstrap-theme.min.css" />
<style>
.banner {color:#FF0000;}
</style>
<script>
$(document).ready(function(){
$("#MyModal5").on('hidden.bs.modal',function(){
            $("#btnYes").on('click',function(e){
                var $myMod = $(this);
                var id = $myMod.data('cust-id');
                if(id=='y'){
                    alert("You clicked yes button");
                }
            });
        });
    });
</script>
</head>
<body>
<!-- -------------------------------------------------------------------- -->
<div class="modal fade" id="MyModal5">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-title">
                <label style="color:#FF6600;">Confirmation</label>
            </div>
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <label>This may cause to make an additional hit to server. Are you sure you want to continue ?</label>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success btn-sm" id="btnYes" data-cust-id="y" data-dismiss="modal">Yes</button>
                <button class="btn btn-danger btn-sm" id="btnNo" data-cust-id="n" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>
<!-- -------------------------------------------------------------------- -->
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <label>If you want to visit google</label><a href="#" data-toggle="modal" data-target="#MyModal5">Click here</a>
        </div>
    </div>
</div>
</body>
</html>

的想法是，我有一个链接，当我点击该链接时，我需要填充模型。它的工作，现在，如果我点击"是"按钮的模态，我需要一个警报，但问题是，警报不显示当我点击是按钮第一次，但如果我再次点击该按钮第二次它显示，另一个问题是，如果我点击第三次警报显示明智，我不知道确切的原因，我怀疑这是因为jquery的事件。谁能帮我解决这个问题?

我认为问题可能源于您的点击事件绑定嵌套。尝试删除外部绑定，并以这种方式注册click事件:

$(document).ready(function() {
    $("#btnYes").on("click",function(e) {
            var $myMod = $(this).closest(".modal"); // Select on closest parent modal
            // Now run your required code
        });
    });
});

希望这工作和帮助!祝你好运。

相关文章：