jQuery - 自動完成+追加函數

我有一個頁面，我想動態地添加更多的文本字段，爲此我使用jQuery .append函數。不過，我也希望通過使用另一個jQuery函數來自動完成這些文本字段。下面是我有，如JavaScript：jQuery - 自動完成+追加函數

<script> 
$(document).ready(function() { 
    $("#addInputs").click(function() { 
     $("#inputList").append("<input type='text' id='autocomplete' size='35' name='sales[]' /><br />"); 
    }); 
}); 
</script> 
<script> 
$(function ac() { 
    var availableTags = [ 
    "ActionScript", 
    "AppleScript", 
    "Scheme" 
    ]; 
    $("#autocomplete").autocomplete({ 
    source: availableTags 
    }); 
}); 
</script>

我有以下HTML：

<div id='inputList'> 
    <input type='text' id='autocomplete' size='35' name='sales[]' /><br /> 
    </div> 
    <a id='addInputs' />Add Inputs</a>";

自動完成的工程，我已經顯示在屏幕一旦加載頁面上的文本字段。「添加輸入」也可以正常工作，並在屏幕上正確添加更多字段。

問題是這些新添加的字段不會觸發自動填充功能。任何想法如何實現？

謝謝！

來源

2013-06-19 mmvsbg

問題是代碼對每個附加元素使用相同的id。 ID必須是唯一的。重構代碼，以便爲附加到DOM的元素設置類屬性。然後在調用autocomplete函數時使用該類作爲選擇器。

的Javascript

<script> 

     var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Scheme" 
     ]; 

     $(document).ready(function() { 
     $("#addInputs").click(function() { 
      //Adding the class 
      $("#inputList").append("<input type='text' class='autocomplete' size='35' name='sales[]' /><br />"); 

      //Selector using the class 
      $(".autocomplete").autocomplete({ 
      source: availableTags 
      }); 
     }); 
    }); 
</script>

來源

2013-06-19 09:36:58

謝謝！我現在將類ID更改爲類，但是我仍然沒有在新添加的字段上觸發自動完成功能。 – mmvsbg

@ user2500469查看更新。對'autocomplete'的調用應該在click事件處理程序中。 –

謝謝，現在就像一個魅力！真的很感謝幫助！ – mmvsbg

一旦你添加一個新的輸入元素，你需要初始化對他們的小部件。

$(function() { 

    function autocomplete(el){ 
     $(el).autocomplete({ 
      source: availableTags 
     }); 

    } 

    var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Scheme" 
    ]; 

    autocomplete($("#autocomplete")) 

    $("#addInputs").click(function() { 
     var el = $("<input type='text' size='35' name='sales[]' /><br />").appendTo("#inputList"); 
     autocomplete(el) 
    }); 
});

來源

2013-06-19 09:37:07

在HTML ID屬性應該包含獨特的價值，而不是階級屬性，所以不是ID使用類（CLASS =「自動完成」）

來源

2013-06-19 09:38:15 Arunprabu

謝謝！不幸的是，使用類而不是id的結果是完全相同的。 – mmvsbg

我認爲發生了問題，因爲.autocomplete功能被綁定只有一次在DOM已經元素，我的建議是使用.live或.on綁定，後面的元素可以綁定到：

$('#autocomplete').on("focus", function(e) { 
    if (!$(this).data("autocomplete")) { 
     $(this).autocomplete({    
      source: availableTags 
     }); 
    } 
});

來源

2013-06-19 09:47:10 udidu

我的假設很相似 - append添加了新元素，但由於它們不是初始DOM的一部分，所以自動完成不會觸發它們。我嘗試使用.on和.live，如上所述，但目前尚未成功。 – mmvsbg

jQuery - 自動完成+追加函數

回答

相關問題