jquery自动完成不适用于克隆行动态formset django

Question

我正在使用 Jquery 自动完成功能，并且在第一行工作正常。动态添加的行没有自动完成功能。我是新来的。

这里是动态表单集的代码：

function addForm(btn, prefix) {
    var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
    var row = $('.dynamic-form:first').clone();
    $(row).removeAttr('id').insertBefore($('.dynamic-form:last')).children('.hidden').removeClass('hidden');
    $(row).children().not(':last').children().each(function() {
        updateElementIndex(this, prefix, formCount);
        $(this).val('');
    });

    $(row).find('.delete-row').click(function() {
        deleteForm(this, prefix);
    });

    $('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
        return false;
    }

这是初始化自动完成的代码：

$('.autocomplete).each(function() {
    var datacontent = $("#"+this.id).attr('data-content');
    $("#"+this.id).autocomplete({
        source: datacontent, // json format
        select: function(event, ui) {
            $("#"+this.id+"_id").val(ui.item.value);
            $("#"+this.id).val(ui.item.label);
            return false;
        },
        change: function(event, ui) {
            if ($("#"+this.id).val().length == 0) {
                $("#"+this.id+"_id").val('');
            }            
        }
    });
});

Answer 1

尝试使用

var row = $('.dynamic-form:first').clone(true);

而不是

var row = $('.dynamic-form:first').clone();

通过在clone() 中设置true，它使用事件处理程序进行克隆。

您可以使用事件处理程序代替each 函数

$('.autocomplete').on("click",function() {
    var datacontent = $("#"+this.id).attr('data-content');
    $("#"+this.id).autocomplete({
        source: datacontent, // json format
        select: function(event, ui) {
           $("#"+this.id+"_id").val(ui.item.value);
           $("#"+this.id).val(ui.item.label);
           return false;
        },
        change: function(event, ui) {
            if ($("#"+this.id).val().length == 0) {
                $("#"+this.id+"_id").val('');
            }            
        }
    });
});

您可以根据需要更改click。 each 函数适用于已生成的 dom 元素，但当您使用事件处理程序时，它会将事件附加到已生成的 dom 元素以及动态生成的元素。