Question

我有一系列动态生成的输入具有相同的类，例如：

<input class="addressitem" type="text"/>
<input class="addressitem" type="text"/>
<input class="addressitem" type="text"/>

用户在每个字段中输入数据后，我想获取该数据并将其放在隐藏输入的值字段中。

但是，我无法找到最佳方法。到目前为止，我已经尝试过：

$(".addressitem").focusout(function() {
    var addressinput = $(this).val();
    console.log(addressinput);
});

和

$(".addressitem").change(function() {
    var addressinput = $(this).val();
    console.log(addressinput);
});

但我无法在控制台中出现任何内容。

有人能指出我正确的方向吗？

Answer 1

只要您在document.ready事件中定义它们并且页面中没有任何其他脚本错误，您的两种方法都应该有效。

$(function(){

   $(".addressitem").change(function() {
    var addressinput = $(this).val();
    console.log(addressinput);
   });

   $(".addressitem").focusout(function() {
    var addressinput = $(this).val();
    console.log(addressinput);
   });

});

您可以使用浏览器控制台验证页面中是否存在其他脚本错误。

还要记住，焦点结束时，文本输入字段会发生change事件。因此，当用户从文本框更改焦点时，您将看到console.log。如果您想要即时更新，则应考虑使用keyUp事件

Here是一个工作样本。

编辑：根据评论：我有一个Jquery点击功能生成的字段。我必须在点击功能中移动我的代码才能使用它。

不，你不需要。您只需使用jQuery on委派方法即可。当您使用jQuery on注册事件处理程序时，它将适用于DOM中的当前和未来元素（动态注入）。

所以你的代码将是

$(function(){

   $(document).on("change",".addressitem",function() {
     var addressinput = $(this).val();
     console.log(addressinput);
   });     

});

Answer 2

这可能是最佳选择，因为您说它们是动态生成的输入。

$(document).on("blur",".addressitem",function() {
    var addressinput = $(this).val();
    console.log(addressinput);
});

WORKING FIDDLE

检查您的控制台

从.focusout（）上的输入中检索.val（）

2 个答案: