Question

我是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>

想法是我有一个链接，而我点击该链接我需要填充model.its工作，现在如果我点击该模态上的“是”按钮，我需要一个警报，但问题是，我第一次点击是按钮时没有显示警报，但如果我再次点击该按钮显示，另一个问题是如果我点击第三次警报显示twise，我不知道具体原因，我怀疑这是因为jquery的事件。任何人都可以帮我解决这个问题

Answer 1

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

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

希望这有效并有所帮助！祝好运。

bootstrap模态按钮单击事件第一次未触发

1 个答案: