jquery克隆组合框无法正常工作

我有下面的表格，当我按下第一个按钮时，我调用一个jQuery来克隆第一行并添加一个新行。jquery克隆组合框无法正常工作

<table id='vehReg' class='table table-striped table-bordered bootstrap-datatable' style='font-size:10px;table-layout: fixed;'> 
            <thead> 
             <tr> 
               <th style='width: 10%;'>No.</th> 
               <th style='width: 30%;'>Sel</th> 
               <th style='width: 20%;'>Desc.</th> 

               <th style='width: 18%;'><input type= 'button' value='Add Row' id='addRow()' /> 
            <input type='hidden' value='0' id='totalRows' name='totalRows' /></th> 
              </tr> 
             </thead> 
             <tbody> 
             <tr> 
             <td> 
              1 
             </td> 
              <td> 
                 <select class='sSelect' data-rel='chosen' style='font-size:10px;max-width:80%;'> 
               </select> 

               <br\><p style='color:#FF0000;' type='text' class='srror' ></p> 
              </td> 
              <td> 
               <input style='font-size:10px;max-width:80%;' class='descInput' type='text' id='desc' name='desc' ><p style='color:#FF0000;' type='text' class='descError' ></p> 
              </td> 
              <td> 
              </td> 
              </tr> 
             </tbody>

下面是我的克隆的jquery。它很好地克隆了现在的问题是，一旦它克隆我的选择无法再工作。我只是不能选择组合框。任何调整是必要的我正在使用数据rel的组合框的引导类型，以提供在其中搜索的选项。

$("#addRow").click(function(){ 

      var count = $("#vehReg tr").length; 
      var $clone = $("#vehReg tbody tr:first").clone(); 
     $clone.attr({ 
      id: "emlRow_" + count, 
      name: "emlRow_" + count, 
      style: "" // remove "display:none" 
     }); 
     $clone.find("input,select").each(function(){ 
      $(this).attr({ 
       id: $(this).attr("id") + count, 
       name: $(this).attr("name") + count 
      }); 
     }); 

     $("#vehReg tbody").append($clone); 
});

来源

2015-09-23 user5313398

你有任何链接来显示你正在使用哪个引导组合框？ –

你使用组合框的任何插件 –

_一旦它克隆我的选择不能工作more_ =>不是很清楚这意味着什么。创建一个复制问题的小提琴。 – lshettyl

我在你的机器上试过你的代码，它工作的很完美。也许你的问题在于引导组合框。因此，请尝试刷新或重置引导程序组合框。

我已经使用过类似的plugin并且有类似的问题。所以我用这个，它解决了我的问题。

$("#select").selectpicker('refresh');

此外，我发现你的上述粘贴代码中的一个小错误。

<input type= 'button' value='Add Row' id='addRow' />

而是像

id='addRow()'

因此，这里是选择插件更新的代码。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#addRow").click(function(){ 
      var row = "<tr>"+ 
        "<td></td>"+ 
        "<td><select class='chosen-select'> <option>1 --</option> <option>2 --</option> <option>3 --</option> <option>4 --</option> <option>5 --</option> <option>6 --</option> <option>7 --</option> <option>8 --</option> </select></td>"+ 
        "<td><input style='font-size:10px;max-width:80%;' class='descInput' type='text' id='desc' name='desc' ></td>"+ 
        "</tr>"; 
      $("#vehReg tbody").append(row); 
      $(".chosen-select").chosen(); 
     }); 
    }); 
</script> 
<body> 
    <table id='vehReg'> 
     <thead> 
      <tr> 
       <th>No.</th> <th>Sel</th> <th>Desc.</th> 
       <th ><input type= 'button' value='Add Row' id='addRow' /> 
        <input type='hidden' value='0' id='totalRows' name='totalRows' /></th> 
       </tr> 
      </thead> 
      <tbody> 

      </tbody> 
     </table> 
</body>

希望这会有所帮助。

我在JavaScript本身中添加了代码，而不是克隆函数。通过这种方式，您可以更轻松地维护计数并不断向字段添加命名约定。

来源

2015-09-23 09:55:13 itssajan

放置$（“＃select”）。selectpicker（'refresh'）;我的意思是在我的jqeury中的哪个位置？ – user5313398

我做了进一步的阅读这个问题是选择不工作的克隆行 – user5313398

你使用的插件是什么？你能给一个链接到插件 – itssajan

得到它的问题是当你声明输入使用id为addRow而不是addRow（）。

<input type='button' value='Add Row' id='addRow' />

来源

2015-09-23 09:51:50

我已经在我的本地尝试过相同的代码，它在更改后工作正常。 –

我已经纠正了，但我知道问题是现在的问题是选择不工作。 – user5313398

jquery克隆组合框无法正常工作

回答

相关问题