引导模式按钮单击事件不会触发对第一次(bootstrap modal button click ev

2019-10-19 16:32发布

我是新来Twitter的引导。我现在用的是引导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>

想法是,我有一个链接,而我是点击链接,我需要填充model.its工作,现在如果我点击“是”按钮上的模态,我需要一个警告,但问题是,警报不是显示当我对第一次是点击链接,但如果我再次点击该按钮,它显示第二次,另一个问题是谓如果我点击了第三次警报显示twise,我不知道确切的原因,我怀疑这是因为jQuery的事件的。 任何一个可以帮助我解决售后服务这个问题

Answer 1:

我相信这个问题可以从你的点击事件绑定干嵌套。 尝试取出外部约束力,只是登记在这样的单击事件:

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

希望这个作品和帮助! 祝好运。



文章来源: bootstrap modal button click event not fired on first time