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;                   
    });                                 
});

但是在动态创建的行中，任何＆＃39;选择＆＃39;框中有选择选择框下拉。但是当我更改第二个+选择框中的值时，它只会更改第一行上的值。

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

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

我做错了什么？

谢谢！

Answer 1

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

1）根据＆＃39;问题＆＃39; bootstrap-select found 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个选择字段。我不必单独解决每个问题，因为它只是取代了选择＆＃39;领域。克隆函数为每个字段提供正确的数据。

我自己一直在自我教学，所以如果有人注意到我可以做得更好，我总是渴望学习。

感谢。

Bootstrap-Select不响应动态添加的行/内容

1 个答案: