Q:

bootstrap modal button click event not fired on first time

i am new to twitter bootstrap .i am using the bootstrap 3
and  this is my html code
<!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>

idea is that i have a link, while i click on that link i need to populate the model.its working,now if i click on the 'yes' button on that modal ,i need an alert, but problem is that alert is not showing when i click  on yes button for first time  ,but if  i again click on that button for second time it is showing,another problem is tht if i clicked on third time alert is showing twise,i   dont know the exact reason,i suspect this is because of the on event of jquery.
can any one help me to slove this issue

A:

I believe the issue may stem from your click event bindings being nested.  Try removing the outer binding and just register the click event in this way:
$(document).ready(function() {
    $("#btnYes").on("click",function(e) {
            var $myMod = $(this).closest(".modal"); // Select on closest parent modal
            // Now run your required code
        });
    });
});

Hope this works and helps!  Good luck.  

