javascript - 使用 jquery 计算动态创建的 html 元素

Question

我正在计算当前文档中有价值的输入数量。它工作正常，除非我动态添加了更多输入。我无法到达那里的价值。

例如我可能有

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

我在其中创建新元素并模糊所有文本框，我想计算有多少元素具有价值并记录下来。现在它现在将使用静态元素响应模糊事件。它不适用于动态创建的元素

score 8 · 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);

score 3 · Accepted Answer

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

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

score -2 · Accepted Answer

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

<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

希望你觉得这个有用

3 回答 3