jquery autocomplete无法处理克隆行动态formset django

时间:2016-09-05 08:11:51

标签: javascript jquery django autocomplete

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

以下是动态formset的代码:

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('');
            }            
        }
    });
});

1 个答案:

答案 0 :(得分:0)

尝试使用

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

而不是

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

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

您可以使用事件处理程序代替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('');
            }            
        }
    });
});

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