克隆tr以添加新项并替换选择框

Cloning tr to add new item and replacing a select box

本文关键字：替换选择新项 tr 添加克隆更新时间：2023-09-26

我有一个代码，我不得不克隆尊敬的tr和创建新的，但tr有列有一个选择和选择有一个值，当选择转换选择框为文本框，然后当我点击添加项目，它添加了另一个文本文本，我知道为什么它正在发生，因为我只是克隆它。

我怎么能解决它，我有点困惑

这是我的代码

<table>
<tr><td><input type="text"></td></tr>
        <tr>
            <td><div id="stlineitems">
              <label for="stlineitems">Item(s)</label></td>
            <td><div class="onlyleft">
                <select name="get_Items" id="get_Items" class="selectItemsList" data-rule-required="true" data-msg-required="Choose Item">
                  <option></option>
                </select>
              </div>
              <div class="moveboxleft">
                <select name="getSelection" class="form-control getSelectedprice">
                    <optgroup label="Class Price">
                        <option value="160.0000">$160.00</option>
                    </optgroup>
                    <optgroup label="Custom Price">
                        <option value="0">$0</option>
                        <option value="-2">My Price</option>
                        <option value="-1">Custom Price</option>
                    </optgroup>
                </select>
              </div><div class="moveboxleftinput" style="display:none;">
                <input type="text" name="getSelection" value="" class="form-control">
              </div>
              <br/>
              <div class="nextitem"><a href="javascript:void(0);" class="createNewItemTag">Add Item</a></div></td>
              </div>
          </tr>
    </table>

    $('.createNewItemTag').click(function(){
        var obj = $(this).parents('tr').first();
        var clonedObj = $(obj[0].outerHTML);
        clonedObj.find(".select2-container").remove();
        clonedObj.find('.createNewItemTag').remove();
        clonedObj.find('td').last().append("<a class='removeItem' href='javascript:void(0);'>Remove</a>");
        clonedObj.find(".removeItem").click(function(){
            $(this).parents('tr').first().remove();
        }); 
        obj.before(clonedObj);
        initSelect2ForNextItem(clonedObj.find(".selectItemsList").first());
    });
    $(document).on('change','.getSelectedprice',function() {
        if ($('.getSelectedprice option:selected').text() == "Custom Price"){
            $('.moveboxleft').hide();
            $('.moveboxleftinput').show();
        }else {
            $('.moveboxleft').show();
            $('.moveboxleftinput').hide();
        }
    });

你确实有一些嵌套不当的HTML应该修复。

但是对于克隆。我的建议是永远不要克隆一个项目后，它已经仪器化任何事件处理程序或其他插件(如Select2)。避免这种情况的方法如下:

在页面加载时立即克隆行(在注册事件处理程序和检测之前)。
无论何时需要新行，克隆原始的克隆。这样，你仍然可以一遍又一遍地复制原始克隆。
尽可能使用事件委托来注册事件处理程序。
如果您需要在新添加的行上检测任何元素，请在将其插入页面后执行。

在你的例子中，你可以这样写:

var $table = $('table');
var $CLONED_ROW = $table.find('tbody>tr:first').clone();
$CLONED_ROW.find('.createNewItemTag').replaceWith(
    '<a class="removeItem" href="#">Remove</a>');
$table.on('click', '.createNewItemTag', function(e) {
    e.preventDefault();
    var $row = $(this).closest('tr'),
        $newRow = $CLONED_ROW.clone();
    $newRow.insertBefore($row);
    //initSelect2ForNextItem($newRow.find('.selectItemsList'));
});
$table.on('click', '.removeItem', function(e) {
    e.preventDefault();
    $(this).closest('tr').remove();
}); 
$table.on('change', '.getSelectedprice', function() {
    var $select = $(this),
        $row = $select.closest('tr');
    if ($select.val() == '-1') {
        $row.find('.moveboxleft').hide();
        $row.find('.moveboxleftinput').show();
    } else {
        $row.find('.moveboxleft').show();
        $row.find('.moveboxleftinput').hide();
    }
});
//initSelect2ForNextItem($table.find('.selectItemsList'));

注意对initSelect2ForNextItem()调用的位置。

jsfiddle