如何初始化jquery方法的表單添加？

Question

我有一個表單，我試圖去做一些你經常用標籤看到的東西：第一個標籤有一個文本框，並且，如果你在其中添加了一些東西，一個新的和類似的文本框顯示爲接收另一個標籤。等等。通過爲textfield設置一個jQuery .blur（）處理函數，我已經掌握了這個工作的基本知識：在輸入值並且用戶離開字段之後，處理程序運行並將新字段插入到表單中。該處理器是相當香草，是這樣的：

$('input.the_field_class').blur(function() { ... }); 

其中.the_field_class識別輸入字段（S）收集的值。

我的問題是，當用戶輸入第一個值後，新的文本字段很高興地添加到窗體中時，模糊處理程序不會在用戶將某些內容輸入到新添加的字段中時觸發，然後將其保留。第一個領域繼續正常工作，但第二個領域從未工作。 FWIW，我已經注意並避免了初始和添加字段之間的任何ID和名稱衝突。我曾經認爲jQuery會選擇添加的textfield，它與第一個textfield具有相同的類標記，並且像原始的那樣處理它，但也許我錯了 - 是否需要戳一下頁面或部分它與某種jQuery初始化的東西？謝謝！

Answer 1

沒有在更多的上下文中看到你的代碼，很難確切知道，但我最好的猜測是你將一個處理程序附加到第一個字段，但沒有被調用來附加到它的代碼新的領域。如果是這種情況，您有幾個選項，其中兩個是：

1）在您的blur()處理程序中，包含用於將blur處理程序附加到新創建的字段的代碼。

2）使用jQuery的event delegation附加處理程序到外地容器，也能聆聽到容器上的任何字段blur事件：

<div class="tag-container"> 
    <input class="the_field_class" /> <!-- initial tag field --> 
</div> 

<script> 
    var $tagContainer = $('.tag-container'); 
    var createNewField = function() { 
    $tagContainer.append($('<input class="the_field_class" />'); 
    }; 
    $tagContainer.on('blur', 'input.the_field_class', createNewField()); 
</script> 

哪個是更好的將取決於你的使用情況，但我d猜猜第二個選項對你來說會更好，因爲你不太可能處理來自容器的大量模糊事件。