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+ 选择框中的值时，它只会更改第一行的值。

它的第 2 行或第 3 行或其他什么都没有关系。当我更改 selectpicker 选择框时。只有第 1 行得到更新。并且第 2+ 行始终保持默认值。

就像它们都被绑定到第一行，而不是新的（动态添加的）行。

我做错了什么？

谢谢！

Answer 1

找到了答案，至少对我有用。看来我有两个问题。

1) 根据 bootstrap-select 的“问题”页面找到 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 个选择字段。我不必单独解决每个问题，因为它只是替换了“选择”字段。并且克隆功能为每个字段提供正确的数据。

这一切我都是自学的，所以如果有人发现我可以做得更好，我总是渴望学习。

谢谢。