引导选择不响应动态添加的行/内容

然后我可以克隆该行以创建一个新行。喜欢这个。

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代码的僵尸终于解决了我的解决方案。谢谢！ –

引导选择不响应动态添加的行/内容

回答

相关问题