jQueryUI自動完成只綁定到第一個元素

我有一個包含一行輸入的表單。其中一個輸入是jQueryUI自動完成，每行都有一個按鈕旁邊的按鈕，用於克隆該行，以便創建額外的記錄。我有自動完成設置識別並結合到新創建的輸入：jQueryUI自動完成只綁定到第一個元素

$('.input .my-field').on('focus', function() { 
    var $this = $(this); 

    $this.autocomplete({ ... }); 
});

什麼我發現是這樣的：

第一行中的自動完成野外工作正常。
第二行中的自動填充字段正常工作如果我沒有在第一行中輸入該字段的值。
如果我在確實在第一行中輸入了值，第二行中的自動填充字段完全不起作用。

底線是，如果我首先創建所有行，一切都按預期工作，但這不是預期的用例。大多數人會輸入第一個記錄，點擊添加另一個，輸入這些值，點擊添加另一個，沖洗，重複。

我仍然在使用它，但是我正在燃燒幾個小時，所以我希望有人知道發生了什麼，並能夠用一個不需要幾小時的解決方案來解決問題我自己的。

來源

2012-11-27 Rob Wilkerson

我不知道這個問題的答案，但我對這個第一個想到的，就是你可能需要刪除專注於第一場的模糊，這就是爲什麼它只是工作，如果焦點ISN沒有給第一個。使用關閉功能。我想我可以提供更好的幫助，如果你在http://jsfiddle.net/中設置它，讓我陷入混亂。 –

我創建了[小提琴]（http://jsfiddle.net/tZ92F/），以確認問題。兩個問題：爲什麼不在克隆時創建'autocomplete'，而不是焦點？爲什麼克隆？ – mgibsonbr

有必須前克隆的autocomplete輸入之後執行兩個額外的步驟重新創建它：

卸下aria-haspopup屬性;
刪除autocomplete數據。

只是調用autocomplete("destroy")不會這樣做，由於某種原因它會銷燬原始輸入而不是克隆。在jsFiddle工作示例。以下相關代碼：

var clone = $(...) 
    .clone(true) 
    .removeAttr("aria-haspopup") 
    .data("autocomplete",null);

來源

2012-11-27 21:53:32 mgibsonbr

我會盡快查看詳細信息，但是關於刪除「自動填充數據」的快速問題。看起來這只是一個由widget添加的'data-'屬性？出於其他原因，我沒有注意到在查看生成的代碼時。謝謝你的幫助。 –

@RobWilkerson如[文檔]（http://api.jquery.com/data/）中所述，jQuery獨立於'data-'屬性存儲任意數據。它可以使用這些預先填充元素的「數據」，但後續更改僅反映在內部對象上。我使用[FireQuery]（http://firequery.binaryage.com/）對它進行了檢查，懷疑它阻止了'autocomplete'的正確初始化，測試和工作。但是我不知道關於**爲什麼發生的具體細節，或者爲什麼'destroy'在克隆元素上使用時表現得如此奇怪。 – mgibsonbr

夠公平的。我經歷了一些網絡檢查員的研究，然後你進行了檢測。謝謝你的幫助。 –

jQueryUI自動完成只綁定到第一個元素

回答

相關問題