bootstrap模式按钮点击事件没有在第一次被触发 [英] bootstrap modal button click event not fired on first time
问题描述
我是twitter新手bootstrap。我使用bootstrap 3
，这是我的html代码
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =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 =stylesheettype =text / csshref =bootstrap-3.1.1-dist / css / bootstrap.min.css/>
< link rel =stylesheettype =text / csshref =bootstrap-3.1.1-dist / css / bootstrap-theme.min.css/>
< style>
.banner {color：＃FF0000;}
< / style>
< script> （'hidden.bs.modal'，function（）{
$（＃btnYes）。
$（document）.ready（function（）{
$（＃MyModal5）。 ）.on（'click'，function（e）{
var $ myMod = $（this）;
var id = $ myMod.data（'cust-id'）;
如果（id =='y'）{
alert（您点击了yes按钮）;
}
}）;
}）;
}）;
< / script>
< / head>
< body>
<！ - ----------------------------------------- --------------------------- - >
< div class =modal fadeid =MyModal5>
< div class =modal-dialog modal-sm>
< div class =modal-content>
< div class =modal-title>
< label style =color：＃FF6600;>确认< / label>
< / div>
< div class =modal-header>
< button class =closedata-dismiss =modal>& times;< / button>
< / div>
< div class =modal-body>
< label>这可能会导致服务器额外点击。您确定要继续吗？< / label>
< / div>
< div class =modal-footer>
< button class =btn btn-success btn-smid =btnYesdata-cust-id =ydata-dismiss =modal>是< / button>
< button class =btn btn-danger btn-smid =btnNodata-cust-id =ndata-dismiss =modal>否< / button>
< / div>
< / div>
< / div>
< / div>
<！ - ----------------------------------------- --------------------------- - >
< div class =container>
< div class =row>
< div class =col-sm-12>
< label>如果您要访问Google< / label>< a href =＃data-toggle =modaldata-target =＃MyModal5>点击此处< / a>
< / div>
< / div>
< / div>
< / body>
< / html>
想法是我有一个链接，当我点击那个链接时我需要填充模型。它的工作，现在如果我点击该模式上的'是'按钮，我需要一个警报，但问题是，当我第一次点击yes按钮时警告没有显示，但是如果我再次点击该按钮的第二个它显示的时间，另一个问题是，如果我点击第三次警报显示twise，我不知道确切的原因，我怀疑这是因为事件的jQuery。
任何人都可以帮我解决这个问题。我相信这个问题可能源于你的点击事件绑定嵌套。尝试删除外部绑定，并以这种方式注册click事件：
$（document）.ready（function（）{ $（＃btnYes）。on（click，function（e）{
var $ myMod = $（this）.closest（。modal）; //选择最接近的父modal
//现在运行您所需的代码
}）;
}）;
}）;
希望这有效且有帮助！祝你好运。
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">×</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
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.
这篇关于bootstrap模式按钮点击事件没有在第一次被触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
