[英]Target an element in Bootstrap modal
I wrote this code so when the user is at the password textbox, he/she can press enter to log in. However, I think because it is in the bootstrap modal so I couldn't target it with jQuery selector.我写了这段代码,所以当用户在密码文本框时,他/她可以按回车键登录。但是,我认为因为它在引导模式中,所以我不能用 jQuery 选择器定位它。 Any idea?
任何的想法?
Here is the HTML:这是 HTML:
<!-- Modal content -->
<div class="modal-content">
<!-- header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<!-- body -->
<div class="modal-body text-center" >
<input class='form-control' type="text" id="userName" placeholder="Username" ng-model='username'>
<input class='form-control' type="password" id="password" placeholder="Password" ng-model='password'>
<div class="modal-footer">
<button type="button" class="btn btn-default" id ="loginButton" ng-click="goToAdminPanel()">Login</button>
<button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>
</div>
</div>
</div>
</div>
</div>
And the jQuery和 jQuery
$("input#password").keyup(function(event){
if(event.keyCode == 13){
$("#loginButton").click();
console.log('This is enter');
}});
that should work.. unless you are generating the form after the script has ran.这应该有效......除非您在脚本运行后生成表单。
try :-尝试 :-
$(document).on('keyup', 'input#password', function(event){
if(event.keyCode == 13){
$("#loginButton").click();
console.log('This is enter');
}
});
or wire the event inside document.ready或在 document.ready 内连接事件
$(function(){
$("input#password").keyup(function(event){
if(event.keyCode == 13){
$("#loginButton").click();
console.log('This is enter');
}
});
});
You have two ways to solve this :你有两种方法可以解决这个问题:
I would suggest the latter as it doesn't need javascript and it would have better support with mobile browser for instance.我建议使用后者,因为它不需要 javascript,并且它可以更好地支持移动浏览器。
First, your code does not show a <form>
tag although you use <input>
, this looks like a bad practice.首先,尽管您使用了
<input>
,但您的代码并未显示<form>
标记,这看起来是一种不好的做法。
Next, if your login button was the type submit
instead of button
, the enter key would automatically submit the parent form when pressed while a field is focused.接下来,如果您的登录按钮的类型是
submit
而不是button
,则在聚焦字段时按下 enter 键将自动提交父表单。
Then, you could either handle the submit
event or not, depending on your use case.然后,您可以处理或不处理
submit
事件,具体取决于您的用例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.