个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在尝试使用 bootsrap 开发一个 popover 登录表单。我在 popover 中有一个复选框，我无法将 onClick 功能推进到 popover 内的复选框。相同的功能在 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>
请指导我。
最佳答案
我建议使用点击。此外，您还必须在 body 元素上应用绑定(bind)。然后显式监视触发操作的特定元素，例如复选框 (vehicleChkBox) 或按钮。
元素未被绑定(bind)的原因是因为元素不可见以被绑定(bind)。
$('body').on('click', '#vehicleChkBox', function(){
window.alert('I was clicked');
});
关于javascript - 弹出框内的复选框功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22420710/
24
4
0
我正在尝试将按钮和 div 底部的一些文本对齐，就像下面的示例中的价格和 checkout 按钮一样。最好的方法是什么。我制作了一个 div，对其设置了样式以获得正确的文本和图片。我只需要将按钮附加到
将内容放置在带圆 Angular 的框 div 中以使其不会重叠的正确方法是什么？ 蓝框是白框父div 里面的内容div。我希望标题位于该父框内，以便它在顶部也有圆 Angular 。 当我尝试“溢出
让 SVG 内联 HTML 文档，带有一个 View 框“x y w h”。如何检查元素是否在 View 框内？ 通过说元素，它可以是组内的嵌套子路径等等...... 所以我想我正在寻找 SVG 的内
有没有办法检查鼠标是否在屏幕上的某个框内。我不知道将 jQuery 变量导出为整数以在 Javascript if 语句 中使用。我知道这可以通过 div 实现，但我不想使用 div 因为我需要很多这
目前我有两个带文本的 div 框 1 和 2，在第三个 div 框内将它们包含在一起。 Sometimes text in box 1 is longer than text inside box2
我是一名优秀的程序员,十分优秀！