在 Bootstrap 模式中定位元素答案

【问题标题】：Target an element in Bootstrap modal在 Bootstrap 模式中定位元素
【发布时间】：2015-09-29 07:24:56
【问题描述】：

我编写了这段代码，所以当用户在密码文本框时，他/她可以按 Enter 键登录。但是，我认为因为它处于引导模式中，所以我无法使用 jQuery 选择器来定位它。任何的想法？

这是HTML：

                    <!-- Modal content -->
                    <div class="modal-content">

                      <!-- header -->
                      <div class="modal-header"> 
                        <button type="button" class="close" data-dismiss="modal">&times;</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>

还有 jQuery

 $("input#password").keyup(function(event){
if(event.keyCode == 13){
    $("#loginButton").click();
    console.log('This is enter');
}});

【问题讨论】：

可能不是解决方案，但请尝试删除id ="loginButton"中的空格
能否请您尝试将alert() 语句放在if(event.keyCode == 13) 条件之前。
我都试过了，都没有用

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

这应该可以工作.. 除非您在脚本运行后生成表单。

尝试：-

$(document).on('keyup', 'input#password', function(event){
   if(event.keyCode == 13){
       $("#loginButton").click();
       console.log('This is enter');
   }
});

或者在 document.ready 中连接事件

$(function(){
   $("input#password").keyup(function(event){
      if(event.keyCode == 13){
        $("#loginButton").click();
        console.log('This is enter');
      }
   });
});

【讨论】：

较低的解决方案不起作用。鞋面完美地工作。非常感谢。

【解决方案2】：

你有两种方法可以解决这个问题：

event delegation
对表单和提交操作使用浏览器默认行为

我会建议后者，因为它不需要 javascript，并且它会更好地支持移动浏览器。

首先，尽管您使用了<input>，但您的代码没有显示<form> 标记，这看起来是一种不好的做法。

接下来，如果您的登录按钮类型为submit 而不是button，则当某个字段获得焦点时按下回车键会自动提交父表单。

然后，您可以处理或不处理 submit 事件，具体取决于您的用例。

【讨论】：