引導選擇不響應動態添加的行/內容

然後我可以克隆該行以創建一個新行。喜歡這個。

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 +選擇框中更改該值時，它只會更改FIRST行的值。

無論它的第2行還是第3行或其他什麼都沒關係。當我改變selectpicker選擇框。只有第1行得到更新。行2+始終保持默認值。

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

我在做什麼錯？

謝謝！

來源

2016-02-23 Nertskull

最好在CODEPEN.io或JSFIDDLE.net中爲您的問題創建一個示例。現在，很難理解這個問題以及嘗試不同的假設。 –

「item_number」是您正在搜索的id的開頭，所以它應該在單引號中，與「select_product」相同。 –

@zeropoint謝謝！我解決了報價問題。我想現在我已經解決了它，但是我會根據需要在未來發布jsfiddle或同等版本。謝謝！ – Nertskull

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

1）根據bootstrap-select的'issues'頁面找到here我瞭解到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個選擇字段。我不必逐一解決每個問題，因爲它只是取代了「選擇」字段。克隆功能爲每個字段提供正確的數據。

我自學自己所有這一切，所以如果任何人注意到我可以做得更好，我總是渴望學習。

謝謝。

來源

2016-02-24 02:33:34 Nertskull

這工作，經過4個小時尋找解決方案，並使JavaScript + jQuery代碼的殭屍終於解決了我的解決方案。謝謝！ –

引導選擇不響應動態添加的行/內容

回答

相關問題