按输入类型和表单名称的 jQuery 目标选择器答案

【问题标题】：jQuery targeting selector by input type and form name按输入类型和表单名称的 jQuery 目标选择器
【发布时间】：2016-10-18 15:31:49
【问题描述】：

我想定位属于特定名称形式的文本类型的任何输入。因为表单将有许多输入字段，所以我不想针对特定的输入名称，而是捕获表单包装内发生的任何 input[type="text"] 的模糊（或聚焦）事件。

我目前的代码，不起作用：

$( document ).ready(function() {
    $('form[name="tax_form"] input[type="text"]').on("blur",function() {
        alert($(this).val());
    });
});

我回答了我自己的问题。因为代码示例本质上是正确的，所以不需要多人尝试解决无法解决的问题。问题与我放置 javascript 代码的位置有关，与代码本身的结构或语法无关。

【问题讨论】：

它有什么作用？会报错吗？
另外，你的表单 HTML 是什么样的？
我觉得不错：jsfiddle.net/w6udnxnv。问题一定出在其他地方。检查您的控制台是否有错误。
检查您的选择器是否匹配。 console.log($('form[name="tax_form"]')); console.log($('form[name="tax_form"] input[type="text"]'));
如果选择器匹配，那么其他东西可能正在捕获模糊事件，或者您的输入字段可能是“特殊的”（例如，用户实际上点击了其他东西，而一些 js 将其放入该字段） ..我会尝试控制台并直接输入js代码，以找出问题所在。否则发布完整的代码。

标签： javascript jquery forms selector

【解决方案1】：

事件"change" 的工作方式就是您想要的。当单击输入或键入文本时，事件处理程序实际上不会触发，它会在输入文本时触发并且然后输入失去焦点。

在以下代码段中，您使用的相同选择器被委托给 "change" 事件。您会注意到 ['tax_form'] 有 4 个文本输入，但最后一个是唯一有效的。原因是如果输入没有分配type 属性，那么默认情况下type 是'text"。因此，当使用基于输入 type="text" 的选择器时，您必须牢记这一点。因此，如果您完全控制自己的 HTML，请确保每个输入都有一个带有显式值的 type 属性，或使用更好的 IMO 类。

片段

$(document).ready(function() {
  $('form[name="tax_form"] input[type="text"]').on("change", function() {
    alert($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form name='notIt'>
  <fieldset>
    <legend>Not a Tax Form</legend>
    <input>
    <input type="text">
    <input>
    <input type="text">
  </fieldset>
</form>
<br/>
<br/>
<form name='stillNotIt'>
  <fieldset>
    <legend>Still not a Tax Form</legend>
    <input type="text">
    <input>
    <input type="text">
    <input>
  </fieldset>
</form>
<br/>
<br/>
<form name='tax_form'>
  <fieldset>
    <legend>Tax Form</legend>
    <input class='klass' value='TEXT INPUT BY DEFAULT'>
    <input value='TEXT INPUT BY DEFAULT'>
    <input name='text' value='TEXT INPUT BY DEFAULT'>
    <input type='number'>
    <input type='text' value='THIS ONE COUNTS'>
  </fieldset>
</form>

【讨论】：

【解决方案2】：

以前的评论员是对的，我的代码原样没有问题。我从头脚本文件中取出选择器代码，并将其放在页脚脚本的底部，它按预期工作。

最后，问题不是我的代码，而是与我放置它的位置有关。可能有其他 javascript 或 jQuery 代码在上面踩踏。

【讨论】：

在页面中找到 javascript 代码时执行。因此，如果将其放在头部，则直接执行而无需加载页面。（除非这应该被 document.ready() 函数阻止。）

【解决方案3】：

您的代码应该可以正常工作。这是一个证明它有效的工作示例。 tax_form 字段应在 blur 上使用 console.log()。 another_form 不应该。

$(function() {
    $('form[name="tax_form"] input[type="text"]').on("blur",function() {
        console.log($(this).val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Tax Form</h1>
<form name="tax_form">
  <input type="text" name="first" value="first">
  <input type="text" name="second" value="second">
  <input type="text" name="third" value="third">
</form>

<h1>Another Form</h1>
<form name="another_form">
  <input type="text" name="first2" value="first2">
  <input type="text" name="second2" value="second2">
  <input type="text" name="third2" value="third2">
</form>

【讨论】：