我正在尝试使用bootsrap开发一个popover登录表单。我在popover中有一个复选框,我无法在弹出窗口内的复选框中强制使用onClick功能。同样的功能在popover外工作正常,请指教我
演示: Jsfiddle
整个剧本
<script>
$(function() {
$('.popover-markup>.trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
content: function () {
return $(this).parent().find('.content').html();
}
});
$('#vehicleChkBox').change(function(){
if($(this).attr('checked')){
$(this).val('TRUE');
}else{
$(this).val('FALSE');
}
alert($(this).val());
});
});
</script>
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<br>
<br>
<div class="popover-markup" data-placement="bottom"> <a href="#" class="trigger" data-placement="bottom">Popover link II</a>
<div class="head hide">Lorem Ipsum II</div>
<div class="content hide">
<form role="form">
<div class="form-group">
<label class="control-label">E-Mail</label>
<input class="form-control" id="username" placeholder="hello@example.com" type="text">
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Passwort</label>
<input class="form-control" id="password" placeholder="******" type="password">
</div>
<div class="form-group">
<button type="button" class="btn btn-primary btn-block">Login</button>
</div>
<div class="row">
<div class="col-xs-6 col-md-8">
<div class="checkbox">
<label>
<input id="vehicleChkBox" type="checkbox"> Remember me
</label>
</div>
</div>
<div class="col-xs-6 col-md-4">
<button type="button" class="btn btn-link pull-right small" onClick="remember_me()">Register new Account</button>
</div>
</div>
</form>
<div class="footer hide">test</div>
</div>
</body>
<script>
$(function() {
$('.popover-markup>.trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
content: function () {
return $(this).parent().find('.content').html();
}
});
$('#vehicleChkBox').change(function(){
if($(this).attr('checked')){
$(this).val('TRUE');
}else{
$(this).val('FALSE');
}
alert($(this).val());
});
});
</script>
</html>
请指导我。
答案 0 :(得分:3)
我建议点击使用。此外,您必须在body元素上应用绑定。然后显式监视触发动作的特定元素,例如复选框(vehicleChkBox)或按钮。
元素没有界限的原因是因为元素不可见被限制。
$('body').on('click', '#vehicleChkBox', function(){
window.alert('I was clicked');
});
答案 1 :(得分:0)
如果您遇到问题,请使用div并添加onclick功能
<div id="uniqueID" onclick="yourFunction()"></div>
<script>
function yourFunction() {
}
</script>
答案 2 :(得分:0)
使用onchange
代替onClick
onchange="myFunction()"
然后在myFunction()
内,您可以检查复选框的状态并采取相应措施。