如何使用 jQuery 选择动态创建的元素答案

【问题标题】：How to select dynamically created elements with jQuery如何使用 jQuery 选择动态创建的元素
【发布时间】：2014-09-16 20:11:18
【问题描述】：

我正在根据用户输入动态更新一些元素。具体来说，我有一个用户可以填写的表单字段表。当页面加载时，我可以计算有多少是空的......

$(whocares).click(callback);

callback = function() {
    var empties = $('.something input[value=""]);
    var count = empties.length; //4
}

但是在用户填写新的之后，计数保持不变。

当我检查 DOM 时，我也看不到更新的值。新的表单字段仍然显示：value 而不是 value="whatever"。

所有的jQuery都在$(document).ready();里面

如何让 jQuery 看到新的变化？

【问题讨论】：

您必须每次都执行$('.something input[value^=""]).length; 才能获得计数。
@imtheman 我就是这样做的，在点击事件的回调中。
哦，我明白了。请改用var empties = $('.something input[value=""]);。
@imtheman ...除非我误解了，你说我需要一行而不是两行，如我的问题所示。
不，抱歉。您需要从input[value^=""] 中删除^

标签： javascript jquery html forms input

【解决方案1】：

从 jQuery 1.9 开始，选择器中的 [value=] 表示法只处理属性 (.attr)，这些属性不匹配表单元素的当前状态，而是匹配元素的 'value' 属性。

只有表单元素的属性 (.prop) 会映射该元素的当前值。

你可以通过

获取空元素

$(":input").filter(function () { return $(this).val() === ""; });

您可以阅读jQuery 1.9 upgrade guide 了解更多信息。

【讨论】：

【解决方案2】：

这段代码：

var count = 0;
$('.something input').each(function()
    if($(this).val().length = 0) {
        count++;
    }
});

【讨论】：

我会试试的。您介意解释一下为什么使用 .each 进行迭代应该有效，但不能直接选择 $(x) 吗？
我使用每个是因为 input[value=""] 是一个 css 选择器。如果您在输入中输入值，它不会更改 html 值属性。使用 each 时，您会动态检查每个元素的值

【解决方案3】：

首先要知道，当您运行 jQuery 选择器时，您要求它查看 DOM 的当前状态并找到与您的选择器匹配的元素。当您将变量设置为等于该 jQuery 函数的结果时，您最终会得到一个 jQuery 元素数组，这些元素表示匹配的 DOM 元素。在访问缓存的变量时，不要再次向 DOM 询问匹配的元素。

例如：

var empties = $('.something input[value^=""]');
empties.length // 4;

如果 DOM 然后更改状态，即：您在两个输入字段中放置了一些值，empties.length 仍然是 4，因为它只是先前选择的缓存 - 它不会再次进行选择。为了检查现在有多少空，您需要再次进行选择 $('.something input[value^=""]').length 现在等于 2。

所以这里的解决方案不是在empties 中缓存选择的结果，而是直接调用$('.something input[value^=""]').length，它会为您提供与该选择器匹配的数量（本例中为空的数量）每次运行时直接从 DOM 中获取。

【讨论】：

谢谢迈克。我更新了问题以更好地展示我在做什么。有问题的 var 在回调中，所以我认为我已经在按照您的建议进行操作，但它不起作用。
嗯，好吧，在这种情况下，这可能是选择器的问题。

【解决方案4】：

你可以使用类似的东西

$(document).on("change", "youtInput.YourImputClass", function(){
  var count = $(document).find("youtInput.YourImputClass[value^='']").length;
}

这应该可以解决问题。

希望这会有所帮助。祝你好运。

【讨论】：