$(input).blur() & $(input).focusout

Question

我有下一个html表格：

<form role="form" action="MAILTO:alejandro@distal.com.ar " method="post" enctype="text/plain" id="form-contacto"> 
  <div class="row">
    <div id="form-column" class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-sm-push-3 col-md-push-3 col-lg-push-3">
      <div class="form-group">
      <label for="name" class="sr-only">Nombre:</label>
      <input type="textbox" placeholder="ingrese su nombre" name="name" id="name" class="form-control">
      <div id="nameRequiredError" class="alert alert-danger" role="alert">El nombre es obligatorio.</div>
      <div id="nameFormatError" class="alert alert-danger" role="alert">Solo se permiten letras y puntos.</div>
      </div>
      <div class="form-group">
      <label for="email" class="sr-only">Correo electr&oacute;nico</label>
      <input type="email" placeholder="ingrese su correo electr&oacute;nico" name="name" id="email" class="form-control">
      <div id="emailRequiredError" class="alert alert-danger" role="alert">El direcci&oacute;n de correo electr&oacute;nico es obligatoria.</div>
      <div id="emailFormatError" class="alert alert-danger" role="alert">Ingrese un correo electr&oacute;nico v&aacute;lido.</div>
      </div>
      <div class="form-group">
      <label for="message" class="sr-only"></label>
      <textarea name="" id="message" cols="30" rows="10" class="form-control" placeholder="Escriba su mensaje..." sizable="false"></textarea>
      <div id="messageRequiredError" class="alert alert-danger" role="alert">Ingrese un mensaje para enviar.</div>
      <div id="messageFormatError" class="alert alert-danger" role="alert">El mensaje no tiene nig&uacute;n caracter alfanum&eactue;rico.</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div id="form-column" class="col-xs-6 col-sm-3 col-md-3 col-lg-3 col-xs-push-6 col-sm-push-6 col-md-push-6 col-lg-push-6">
      <submit class="btn btn-primary form-control"> Enviar &gt;&gt; </submit>
    </div>
  </div>
</form>

我想在输入失去焦点时验证数据输入，但我没有抓住焦点。我尝试了所有这些：

$('#name').blur(function(event) {
    alert("blur");
});

$('#name').focusout(function(event) {
    alert("focusout");
});

// $('#name').live('focusout', function(){
//  alert("live(focusout)");
// });

// $('#name').live('blur', function(){
//  alert("live(blur)");
// });

$('#name').trigger('focusout', function(){
    alert("trigger(focusout)");
});

$('#name').trigger('blur', function(){
    alert("trigger(blur)");
});

$('#name').on('focusout', function(){
    alert("on(focusout)");
});

$('#name').on('blur', function(){
    alert("on(blur)");
});

但是这些都不起作用，有人知道为什么吗？我疯了！感谢所有阅读本文的人！

Answer 1

http://jsfiddle.net/znty7yoy/1/

这里的所有内容都应该可以使用，但我认为您遗漏了一件事 - DOM 在您尝试查询之前尚未准备好。

检查 fiddle - 如果脚本在 HTML 之前 - 这将不起作用，如果在之后 - 它会。

为了防止这种情况，只需换行：

$(function () {
   $('#name')....
}

Answer 2

您的代码似乎在 JS 中运行良好Fiddlehttp://jsfiddle.net/dfkg7dha/2/

但尝试在 ready 函数中添加事件处理程序。一旦 DOM 准备好执行 JavaScript，此处的代码将仅运行。

$(document).ready(function () {
    $('#name').blur(function(event) {
        alert("blur: perform validation here");
    });
});

为了保持理智，请确保 JQuery JavaScript 已在页面上被引用。

Answer 3

没有 jquery 你可以这样做：

var nameEl = document.getElementById("name");

nameEl.addEventListener("blur", function(){
  alert("blurry");
});

Link 到代码：http://codepen.io/sp90/pen/RWpXBQ

$(input).blur() & $(input).focusout

$(input).blur() & $(input).focusout

javascript

jquery

onblur

focusout