Question

我有一个javascript，可以将表单动态添加到django的表单集中，并且正在运行

<input type="button" value="Add form" id="add_more">

<script>
    $('#add_more').click(function () {
        var form_idx = $('#id_parties-TOTAL_FORMS').val();
        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
        $('#id_parties-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    });
    ;
</script>

点击添加表单，它会在我的django formset中再添加一个表单。

但是因为在我的空表格中我有一个字段来使用google map autosuggest：

<script>
    function initialize() {
        var input_location = document.getElementById('id_parties-__prefix__-location');
        var autocomplete = new google.maps.places.Autocomplete(input_location);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

如何使这个额外形式的位置字段工作？

编辑：

简称空格：

<div class="col-sm-12">
    <div class="form-group">
        <label for="{{ form.location.label }}" class="col-sm-3 control-label"> {{ form.location.label }}:</label>

        <div class="col-sm-9">
            {{ form.location.errors }}
            {{ form.location }}
        </div>
    </div>
</div>


<script>
    function initialize() {
        var input_location = document.getElementById('{{ form.location.auto_id }}');
        var autocomplete = new google.maps.places.Autocomplete(input_location);

        var g_autocomplete = $("body > .pac-container").filter(":visible");
        g_autocomplete.bind('DOMNodeInserted DOMNodeRemoved', function (event) {
            $(".pac-item", this).addClass("needsclick");
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

</script>

非常感谢。

Answer 1

基本上，在您的点击处理程序中，您需要执行以下操作：

将最后添加的input元素与jQuery匹配。这将返回一个jQuery对象。
使用[0]。
使用纯JavaScript对象创建自动完成输入。

我们假设您的#empty_form看起来像这样。

<form id="empty_form">
    <input type="text"/>
</form>

然后，您可以使用以下代码段（JSFiddle）动态初始化自动完成输入。

$('#add_more').click(function () {
    ...

    var input = $('#form_set').children('input:last')[0];
    new google.maps.places.Autocomplete(input);
});

如果#empty_form的内容更复杂，可能会稍微复杂一些，但基本程序保持不变。

Django使用google map autosuggest动态添加表单到formset

1 个答案: