Question

我无法使用这个简单的jQuery onblur处理程序来添加适当的类。没有错误返回到控制台，并且模糊事件没有任何反应。我做错了什么？

我已经验证jQuery已正确加载并且工作正常。

＆＃13;

$(document).ready(function() {
  $('#nameInput').on('blur', function() {
    $('#nameInput').addClass('has-success');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-4 col-md-offset-1">
    <form class="form-horizontal" id="form" name="contactform.htm" method="post" action="send_form_email.php">

      <div id="nameInput" class="form-group">
        <label for="first_name" class="col-sm-2 control-label lead">Name</label>
        <div class="col-sm-10">
          <input type="text" name="first_name" id="first_name" class="form-control" placeholder="John Doe">
          <span id="glyph" class="form-control-feedback"></span>
        </div>
      </div>

    </form>
  </div>
</div>

＆＃13;

Answer 1

模糊事件不会冒泡，因此它永远不会到达div。如果你改为使用焦点输出事件，那就可以了。

＆＃13;

$(document).ready(function() {
  $('#nameInput').on('focusout', function() {
    $('#nameInput').addClass('has-success');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-4 col-md-offset-1">
    <form class="form-horizontal" id="form" name="contactform.htm" method="post" action="send_form_email.php">

      <div id="nameInput" class="form-group">
        <label for="first_name" class="col-sm-2 control-label lead">Name</label>
        <div class="col-sm-10">
          <input type="text" name="first_name" id="first_name" class="form-control" placeholder="John Doe">
          <span id="glyph" class="form-control-feedback"></span>
        </div>
      </div>

    </form>
  </div>
</div>

＆＃13;

Answer 2

您将处理程序添加到 div 而不是输入，但 div 不会引发 blur 事件。所以你只需要在输入中添加处理程序，比如

$('#nameInput input').on('blur', function() {
    $('#nameInput').addClass('has-success');
});

另一种解决方案：

将ID从 div 移至输入，
将选择器更改为输入ID

Answer 3

你可能想测试一下这个

$(document).ready( function(){
    $(document).on('blur', '#nameInput', function() { 
    $(this).addClass('has-success');
    });  
});

onblur处理程序没有解雇

3 个答案: