Javascript 使用动态创建的输入

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

他们的名字是名字[]。我可以在服务器端用PHP处理这些输入。但是，我想用这些输入进行计算，就像在用户输入时将所有输入都写在页面上一样

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

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

我必须做些什么来解决这个问题

我两者都用

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

及

但它不起作用

提前谢谢

尝试使用：

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

---

虽然您应该将整个字段名用双引号括起来，但无需转义方括号。这对我很有用：

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

下面是一个JSFIDLE演示：

您的问题实际上可能与动态添加字段有关。您使用选择器的方式只能对已经存在的字段起作用。在该选择器之后添加的字段将不会被拾取。然后，您要做的是将选择器放在.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>

下面是一个示例，您可以在其中动态添加字段，并计算平均值：

---

-1除了使用.on“change”而不是.change外，这与OP已经尝试过的有什么不同？@EthanBrown似乎你不理解OP的问题，-1我也是。我明白了，情况会是这样的。一开始我自己没有看到问题，但是我很确定OP遇到的问题是他在动态添加他的字段。

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