Bootstrap-Select不響應動態添加的行/內容

Question

我有一個表格行，上面有多個選擇框供表單輸入。

然后，我可以克隆該行以創建新行。 像這樣。

var counter = 1;
$(document).ready(function() {
    $('#addItemRow').click(function() {
          $('#itemMultiInputTable tr:last').clone(true,true).insertAfter('#itemMultiInputTable tr:last');

        $('[id^=item_number]:last').attr('id', 'item_number' + counter);
        $('[name^=item_number]:last').attr('name', 'item_number' + counter);

        $('[id^=select_product]:last').attr('id', 'select_product' + counter);
        $('[name^=select_product]:last').attr('name', 'select_product' + counter);

        $('.selectpicker').selectpicker('refresh');
        counter += 1;                   
        return false;                   
    });                                 
});    

但是在動態創建的行上，任何“選擇”框都有下拉選擇選擇器框。 但是，當我在2nd + select框中更改值時，它僅更改FIRST行上的值。

它的第2行或第3行或其他內容無關緊要。 當我更改選擇器選擇框時。 僅第1行得到更新。 並且第2+行始終保持默認值。

就像它們都綁定到第一行，而不是它們的新行（動態添加）一樣。

我究竟做錯了什么？

謝謝！

Answer 1

找到了答案，至少對我有用。 看來我有兩個問題。

1）根據此處找到的bootstrap-select的“問題”頁面，我了解到bootstrap select添加了一個div類來替換您的選擇框。 您必須先刪除該類，然后才能執行任何操作。 然后，您必須在添加的新行上刷新/重新初始化引導程序選擇。

2）最初做完所有這些之后，我仍然無法正常工作。 原來是我的克隆（真，真）。 我假設您想將事件處理程序帶到新行。 我猜不會。 似乎當您克隆事件處理程序時，它將所有內容都綁定到第一行。 因此，將其更改為clone（）就解決了我的問題。

對於可能遇到類似問題的任何人，這是我現在可以正常運行的代碼（至少在firefox中如此）。

var counter = 1;
$(document).ready(function() {
   $('#addItemRow').click(function() {

      // Fix this clone() part - must NOT be clone(true,true)
      $('#itemMultiInputTable tr:last').clone().insertAfter('#itemMultiInputTable tr:last');

    $('[id^="item_number"]:last').attr('id', 'item_number' + counter);
    $('[name^="item_number"]:last').attr('name', 'item_number' + counter);

    $('[id^="select_product"]:last').attr('id', 'select_product' + counter);
    $('[name^="select_product"]:last').attr('name', 'select_product' + counter);

    // These are the two key lines to making it work
    $('#itemMultiInputTable tr:last').find('.bootstrap-select').replaceWith(function() { return $('select', this); });
    $('.selectpicker').selectpicker('refresh');
    counter += 1;                   
    return false;                   
 });                                 
});    

我還要注意，這適用於表單中所有3個選擇字段。 我不必單獨解決每個問題，因為它只是替換了“選擇”字段。 克隆功能為每個字段提供正確的數據。

我一路走來都在自學，所以如果有人發現我可以做得更好的事情，我總是很想學習。

謝謝。