Question

我是Javascript的新手，正在构建一个动态的webform。我的表可以很好地重命名新行（使用＆＃34添加新名称;索引＆＃34;）但是当我删除行并创建新行时它不起作用，因为我的＆＃34;索引 - ;＆＃34;不起作用。请注意，当我说桌子只是一种说话方式时...... 我的代码出了什么问题？

片段

＆＃13;

    $(document).ready(function() {
    
            var index = 0; // 
    
    
        $('.multi-field-wrapper').each(function() {
            var $wrapper = $('.multi-fields', this);
            $(".add-field", $(this)).click(function(e) {
                index++;
                $novaLinha = $('.multi-field:first-child', $wrapper).clone(true)
                $novaLinha.appendTo($wrapper).find('input').val('').focus();
                $novaLinha.find('label').attr('class', 'hideMobile').end();
                $novaLinha.find('[id="itemLinha"]').attr('class', 'row top-buffer-novoItem col-md-12 control-group' + index).end();
                $novaLinha.find('[name="insumo"]').attr('name', 'insumo ' + index).end();
                $novaLinha.find('[name="detalhe"]').attr('name', 'detalhe ' + index).end();
                $novaLinha.find('[name="quantidade"]').attr('name', 'quantidade ' + index).end();
                $novaLinha.find('[name="unidade"]').attr('name', 'unidade ' + index).end();
            });
            $('.multi-field .remove-field', $wrapper).click(function() {
                if ($('.multi-field', $wrapper).length > 1)  {    // Quando se apaga a primeira linha quando há mais de uma, não aparece o título da tabela no desktop          
                    index--;
                    $(this).parent().parent().parent('.multi-field').remove();
                }
            });
        });
    
    };

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="multi-field-wrapper">
        <div class="row top-buffer-inicio " >
            <div class="multi-fields col-md-12">
                <div class="multi-field">
                    <div class = "row top-buffer-novoItem col-md-12 control-group" id="itemLinha">
                        <div class="col-md-3 form-group">
                            <label for="insumo">INSUMO</label>                                                    
                            <div data-name="insumo">
                                <input type="text" name='insumo'  placeholder='Ex. Bloco de Concreto' class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <label for="detalhe"> DETALHE </label> 
                            <div class = "" data-name="detalhe">
                                <input type="text" name='detalhe' placeholder='Ex. Estrutural 14x19x39' class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-1 form-group">
                            <label for="quantidade"> QTD </label>
                            <div class = "" data-name="quantidade">
                                <input type="text" name='quantidade' placeholder="Ex. 55" class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-3 form-group">
                            <label for="unidade"> UNIDADE </label>
                            <div class = "" data-name="unidade">                             
                                <input type="text" name='unidade'  placeholder='Ex. Unitário' class="form-control"/>
                            </div>
                        </div>
                        <div class="col-md-1 col-xs-12 ">
                            <label > </label>    
                            <div class = "remove-field ">                                                                           
                                <div name="remove" class='pull-right btn btn-danger btn-block glyphicon glyphicon-remove '></div>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>                                                                                                        
        <div class="row top-buffer-novoItem">
            <div class="col-md-12">                                          
                <div class="col-md-2 pull-right form-group">
                    <div id="add_row" class="add-field btn btn-grey pull-right">Novo Item</div>
                </div>
            </div>
        </div>
    </div>

＆＃13;

Answer 1

看起来问题是您期望在创建动态元素之前注册的click事件被调用。创建元素后，单击事件不会神奇地连接到元素。您需要在每次创建元素时绑定事件，或者需要使用事件委派。

更改

$('.multi-field .remove-field', $wrapper).click(function() {

到

$($wrapper).on("click", '.multi-field .remove-field', function() {

Answer 2

您的代码适用于我FIDDLE，即使您应该委派 epascarello

发布的点击次数

要拥有更好的计数器，只需使用添加的多字段的长度：

FIDDLE

$(".add-field", $(this)).click(function(e) {
   var index = $('.multi-fields .multi-field').length;

更好：因为除了name之外你没有使用索引，相反，假设你的后端是PHP，那么执行此操作 - 将[]添加到模板中的所有输入字段：

<input type="text" name='detalhe[]'

由于您删除了任何单击已删除的字段，因此您可以使用当前代码创建相同的名称，方法是添加3，删除中间名称并再添加一个。

不能在javascript中减少var

2 个答案: