如何正确克隆Javascript/JQuery中的内容？

Question

我正在使用.clone（）复制表单。我对克隆做了一些小更改，然后将其放在最后一个表单之后。正如你从截图上看到的，它大部分都在工作；它们看起来一模一样。一旦我按下save，应用程序（Django/Python）也可以处理克隆

问题是日历小部件在单击时（在克隆表单上）未打开。如果我在页面上单击窗口小部件按钮，当它第一次加载（不是克隆）时，它确实会打开。但是在我的克隆上，日期选择器没有打开

我点击它后它应该是什么样子（而不是什么都没发生）：

克隆的html看起来完全相同

现有表格：

克隆：

编辑事件侦听器： 在我看来，查看事件监听器中的点击事件标记似乎丢失了

现有表格：

克隆：

克隆的html是否缺少某些内容？还是幕后有什么不起作用的东西？我只是不明白这里坏了什么

JS/JQuery：

function cloneMore(selector, prefix,form_class) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
    newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-', '-' + total + '-');
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');

    });
    newElement.find('label').each(function() {
        var forValue = $(this).attr('for');
        if (forValue) {
          forValue = forValue.replace('-' + (total-1) + '-', '-' + total + '-');
          $(this).attr({'for': forValue});
        }
    });
    total++;
    $('#id_' + prefix + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
    return false;
}

        $(document).on('click', '.add-form-row', function(e){
            e.preventDefault();
            cloneMore('.form-row-payment:last', 'payment_invoice','form-row-payment');
            return false;
        });

HTML:

 {{ payments_formset.management_form }}
    {{ payments_formset.media }}

<h3>Payments</h3>
            {% for formpay in payments_formset %}
                <div class="form-row form-row-payment row container"  name="payment_form" style="padding:0px;" id="payment_formset">
                    {{ formpay.non_form_errors }}
                    {{ formpay.non_field_errors }}

                    {% for hidden in formpay.hidden_fields %}
                    {{ hidden }}
                {% endfor %}                            
                {% for field in formpay %}
                    {% if field.name != 'index' and field.name != 'invoice'%}

                        <div class="col-sm">
                            {{ field.errors }}
                            {{ field|as_crispy_field }}
                            {% if field.help_text %}
                            <p class="help">{{ field.help_text|safe }}</p>
                            {% endif %}                            
                        </div>
                    {% endif %}
                {% endfor %} 
            </div>                    
            {% endfor %}
        <div class="input-group-append">
                    <button class="btn btn-success add-form-row">+</button>
            </div> 

Answer 1

您正在制作HTML对象的副本，但这些对象与原始对象没有相同的事件处理程序。为了解决这个问题，我建议创建一个函数来重置克隆元素的事件处理程序

可以这样做：

&13； 第13部分,；

function resetCalendarClickHandler(){
    $(".input-group-addon").unbind("click") //remove current event handlers to prevent duplication when adding new one
    $(".input-group-addon").click(<yourEventHandler>);
}

；

和#13；