在模态中捕获文本框的 .on('change)答案

【问题标题】：catch .on('change) of textbox within modal在模态中捕获文本框的 .on('change)
【发布时间】：2017-11-09 06:48:05
【问题描述】：

我有一个包含文本框的模式。我想让用户简单地在框中输入，当他们的输入满足要求（长度 4）时，调用一个函数。问题是 .on('change') 函数似乎仅在您单击模式中的某个位置或关闭模式时才被处理。

我正在使用引导程序 3.3.7 和 jquery 3.1.1

$('#signInModal').modal('show');

$('#signInModal-passwordText').on('change', function() {
  //some diagnostic stuff
  $('#signInModal-failedSpan').show();
  $('#signInModal-failedSpan').html($(this).val());
  if ($(this).val().length == 4) {
    //alert('4');
    signIn($(this).val());
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="modal fade" tabindex="-1" role="dialog" id="signInModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Sign In</h4>
      </div>
      <div class="modal-body">
        <input id="signInModal-passwordText" type="password" class="form-control" />
        <span class="alert alert-danger" style="display: none;" role="alert" id="signInModal-failedSpan">Failed!</span>
      </div>
      <div class="modal-footer">
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

【问题讨论】：

你试过on('input',
on("keyup" 是另一个尝试
我给你做了一个sn-p - 下次做同样的事情。

标签： jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

我会使用 onkeyup，因为在许多浏览器中更改需要模糊才能触发：

Diffrence between keyup keydown keypress and input events

function signIn(val) { alert(val)}
$('#signInModal').modal('show');

$('#signInModal-passwordText').on('keyup', function() {
  //some diagnostic stuff
  $('#signInModal-failedSpan').show();
  $('#signInModal-failedSpan').html($(this).val());
  if ($(this).val().length == 4) {
    signIn($(this).val());
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="modal fade" tabindex="-1" role="dialog" id="signInModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Sign In</h4>
      </div>
      <div class="modal-body">
        <input id="signInModal-passwordText" type="password" class="form-control" />
        <span class="alert alert-danger" style="display: none;" role="alert" id="signInModal-failedSpan">Failed!</span>
      </div>
      <div class="modal-footer">
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

【讨论】：

【解决方案2】：

我知道这个问题有点老了，但这可能对其他人有帮助。

你可以改变这一行：

$('#signInModal-passwordText').on('change', function() {

到：

$('.modal').on('change', '#signInModal-passwordText', function() {

【讨论】：