Question

我有一个动态表单，您可以添加元素。比如，您键入一个名称，然后如果您必须写一个新名称，则单击“添加名称”，然后会出现另一个文本框。

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

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

让我说清楚。这样它会更好。我有一个文本框。我在那里输入年龄。如果我想进入一个新的年龄，我点击“添加年龄”按钮，弹出一个新的输入框。我写了新的年龄值。当我输入时，在第3个文本框中，打印出这些年龄值的平均值。但由于那些输入框，名称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/

您的问题实际上可能与您动态添加字段有关。您使用选择器的方式仅适用于已存在的字段。在该选择器之后添加的字段将不会被选中。那么，你想要做的是将选择器放在<{em>里面的.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[]">  </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');
});

使用动态创建的输入

2 个答案: