使用动态创建的输入

Question

我有一个可以添加元素的动态表单。就像，你输入一个名字，然后如果你必须写一个新名字，你点击“添加名字”，另一个文本框就会出现。

他们的名字是names[]。我可以在服务器端使用 PHP 处理这些输入。但是，我想用这些输入进行计算，比如在用户键入时将它们全部写在页面上。

但是，由于这些输入，这些文本框是动态创建的，Javascript 只选择名称为 name[] 的第一个文本框。

让我说清楚。这样会更好。我有一个文本框。我在那里输入年龄。如果我想输入一个新的年龄，我点击“添加年龄”按钮，会弹出一个新的输入框。我写了新的年龄值。当我输入时，在第三个文本框中，这些年龄值的平均值被打印出来。但是由于这些输入框，名称 ages[] 是在执行时创建的（不是编译时，我不确定这些是否适合这些输入框。可能不是，因为没有任何东西在编译？-或者是吗？ )，我无法处理它们。

我必须怎么做才能解决这个问题？

两个都用过

$('input[name=ages\\[\\]]').change(function(){ 
 console.log('1');
});

和

$('input[name=ages\\[\\]]').on('input', function() {
 console.log('2');
});

但它没有用。

提前致谢。

Answer 1

无需转义方括号（尽管您应该将整个字段名称用双引号括起来）。这对我有用：

$('input[name="names[]"]').on('change', function(){
    console.log($(this).val());
});

这是一个 jsfiddle 演示：http://jsfiddle.net/t7J5t/

您的问题实际上可能与您动态添加字段的事实有关。您使用选择器的方式仅适用于已经存在的字段。在该选择器之后添加的字段将不会被拾取。然后，您想要做的是将选择器放入 .on，如下所示：

$('.container').on('change', 'input[name="names[]"]', function(){
    console.log($(this).val());
});

这会将侦听器绑定到容器，而不是字段（只需确保将字段添加到容器内；您可以随意调用它）。

顺便说一句，在使用 jQuery 选择器时，没有理由限制自己使用字段的 name 属性。例如，您可以使用一个类：

<div class="container">
    <input class="age" name="ages[]">
    <input class="age" name="ages[]">
    <!-- ... as many more as needed, added dynamically is OK ... -->
</div>
<script>
    $(document).ready(function(){
        $('.container').on('change', 'input.age', function(){
            console.log($(this).val());
        });
    });
</script>

这是一个实际操作示例，您可以在其中动态添加字段，并计算平均值：

http://jsfiddle.net/t7J5t/1/

Answer 2

尝试使用：

$(document).on('change', 'input[name=ages\\[\\]]', function() { 
    console.log('2');
});