使用jQuery计算动态创建的HTML元素数量

Question

9

我正在统计当前文档中具有值的输入数。它正常工作，但当我动态添加更多输入时，它就无法获取这些新添加输入的值了。

例如，我可能会有:

<input id="participant-1"/>
<input id="participant-2"/>
...

<input id="participant-15" />

我将使用for循环获取每个值，例如：

for(var i =1 ; i <25; i++)
{
  ...$('input#participant-' + i).val();
}

现在，当我运行for循环来检查这些输入框的值时，它只获取没有动态创建的输入框的值。我已经看过其他类似问题的解答，但仍然不知道如何将.on()应用到我想要完成的任务中。

新的跟进问题：好的，现在我认为我需要更多关于如何使用.on()的澄清。

我有一个jsfiddle链接：JsFiddle example，我在其中创建了新元素，并在所有文本框失去焦点时计算具有值的元素数量并将其记录在日志中。现在它只会对静态元素响应失焦事件。对于动态创建的元素无效。

- Abdullah Rasheed

如果您有元素ID，您无需在其前面添加HTML标签。因此，$('#participant-' + i) 更好。 - Ricardo Alvaro Lohmann

2

你提供的示例和代码应该都能正常工作，请添加更多的代码。请说明如何创建副本，以及在请求值时如何操作。如果有jsfiddle就更好了。 - Gabriele Petrioli

你的事件绑定代码在哪里？ - Akhil Sekharan

非常感谢大家！在将它放入jsfiddle之后，我发现当我添加新按钮时，我错过了一段代码。新元素没有遵循相同的命名约定，因此当我尝试使用选择器搜索它时，它找不到它。这是一个小疏忽... - Abdullah Rasheed

你能展示一下动态创建元素的代码吗？你有机会挂钩它吗，还是需要使用突变事件？ - Bergi

显示剩余3条评论

3个回答

3

也可以考虑使用CSS属性选择器。

    $("input[id|=participant]").each(function(){
            // something
    });

- mcolley73

请查看更新的问题，我已经添加了 jsfiddle 并提出了后续问题。 - Abdullah Rasheed

-2

在这里使用类选择器会节省时间。

<input id="participant-1" class="participant"/>
<input id="participant-2" class="participant"/>

然后使用一个简单的计数调用...

var count = $('.participant').length
alert ('You have ' + count + ' Counted Inputs');
//result is 2

希望你觉得这个有用。

- nodsdorf

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Akhil Sekharan · Accepted Answer

给它一个通用的类：

<input class="textbox" id="participant-1"/>
<input class="textbox" id="participant-2"/>

获取方式如下：

var values = [];
$('.textbox').each(function(){
    values.push($(this).val());
});
console.log(values)

回答编辑的问题：

语法应该是：$(container_selector).on(event_type, target_selector, callback)

$('.name').on('blur', 'input', calculate_total);