jQuery 按输入类型和表单名称定位选择器

Question

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

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

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

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

Answer 1

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

在以下代码段中，您使用的相同选择器被委托给"change"事件。 您会注意到['tax_form']有 4 个文本输入，但最后一个是唯一['tax_form'] 。 原因是因为如果输入未分配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>

Answer 2

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

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

Answer 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>