如何使用jQuery選擇動態創建的元素

Question

我正在根據用戶輸入動態更新一些元素。 具體來說，我有一個表單字段表，用戶可以填寫。當頁面加載時，我可以算出有多少是空的...

$(whocares).click(callback);

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

但在用戶填寫新的數字后，計數保持不變。

檢查DOM時，也看不到更新的值。 新的表單字段仍會說： value而不是value="whatever" 。

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

我如何讓jQuery看到新的變化？

Answer 1

從jQuery 1.9開始，選擇器中的[value =]表示法僅處理屬性（.attr），這些屬性與表單元素的當前狀態不匹配，但與元素的'value'屬性匹配。

只有form元素的屬性（.prop）會映射該元素的當前值。

您可以通過獲取空元素

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

您可以閱讀jQuery 1.9升級指南以獲得更多信息。

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;
}

這應該夠了吧。

希望這會有所幫助。 祝好運。