Question

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

$(whocares).click(callback);

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

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

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

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

中

如何让jQuery看到新的变化？

Answer 1

从jQuery 1.9开始，选择器中的[value =]表示法只处理属性（.attr），这些属性与表单元素的当前状态不匹配，但是＆＃39;值＆＃39;元素的属性。

只有表单元素的属性（.prop）才会映射此元素的当前值。

您可以通过

获取空元素

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

您可以阅读jQuery 1.9 upgrade guide了解详情。

Answer 2

此代码：

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

Answer 3

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

例如：

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

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

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

Answer 4

您可以使用类似

的内容

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

这应该可以解决问题。

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