jQuery的克隆组合框无法正常工作 [英] jquery clone combo box not able to function

问题描述

我有下表，当我按下第一个按钮时，我会调用一个jquery来克隆第一行并添加新行.

I have the following table where when I press the first button I call a jquery to clone the first row and add a new row.

<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.现在它很好地克隆了一个问题，那就是一旦克隆了我的选择，它就无法工作了.我只是不能选择组合框.任何调整都是需要的，我正在使用带有数据相关性的组合框的引导类型来提供在其中进行搜索的选项.

Below is my jquery for cloning. It clones well the issue now is that once it clone my select is not able to work any more. I just cant select the combo box. Any tweak is needed I am using the bootstrap type of combo box with data-rel to give the option to search within it.

    $("#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);
});

推荐答案

我在我的计算机上尝试了您的代码，它运行良好.也许您的问题出在引导组合框上.因此，请尝试刷新或重置引导组合框.

I tried your code in my machine and it worked perfectly. Perhaps your problem lies with the bootstrap combo box. So try refresh or reset the bootstrap combo box.

我使用了类似的插件，并且遇到了类似的问题.所以我用了它，就解决了我的问题.

I have used a similar plugin and had a similar problem. So I used this and it solved my problem.

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

我在您上面粘贴的代码中也发现了一个小错误.

Also i found a small error in your above pasted code.

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

相反，就像

id='addRow()'

这是选择的插件的更新代码.

So here is the updated code with chosen plugin.

<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本身中添加了代码，而不是在clone函数中添加了代码.这样，您可以更轻松地维护计数并继续将命名约定添加到字段中.

I added the code inside the javascript itself instead of the clone function. In this way it will be easier for you to maintain the count and keep adding the naming conventions to your fields.

这篇关于jQuery的克隆组合框无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！