javascript 事件处理程序无法在 Django 内联表单集中正常工作

Question

我设计了一个内联表单集如下：

class EventForm(ModelForm):
    class Meta:
        model = Event
        exclude = ['created']

class GalleryForm(ModelForm):
    class Meta:
        model= Gallery
        exclude = ['pub_date']
GalleryFormSet = inlineformset_factory(Event, Gallery, extra=0, min_num=1, fields=('title','image' ))

它在使用时工作正常 'extra = some number' 并正确保存了图库表单数据。但是，当我使用 javascript 处理程序在主事件表单下方添加其他画廊表单时，它会创建两个画廊表单而不是 1，并且数据和照片不会从新添加的表单中保存。

这是我的事件处理程序：

<script type="text/html" id="gallery-template">
            <div id="gallery-__prefix__">
                {{ formset.empty_form }}
            </div>
        </script>
        <script>
            $(function() {
                $('.add-photo').click(function(ev){
                    ev.preventDefault();
                    var count = parseInt($('#id_gallery_set-TOTAL_FORMS').attr('value'), 10);
                    var tmplMarkup = $('#gallery-template').html();
                    var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count)
                    console.log(compiledTmpl);
                    $('div.gallery').append(compiledTmpl);
                    $('#id_gallery_set-TOTAL_FORMS').attr('value', count);
                });
            });
    </script>

我的表单集模板：

<form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
                        {{ formset.management_form }}
                        {% csrf_token %}

                        <legend>Events</legend>
                        <div class="author">
                        {{ form.as_p}}
                        </div>

                        <legend>
                            <div class="pull-right"><a href="#" class="btn btn-inverse add-photo"><i class="icon-plus icon-white"></i> Add Photo</a></div>
                            Gallery
                        </legend>
                        <div class="gallery form-inline">
                            {% for form in formset %}
                                {{ form.as_p }}
                            {% endfor %}
                        </div>
                      <div class="form-group">
                        <div class="col-sm-offset-6 col-sm-6">
                            <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                        </div>

                     </form>

请注意，当我编辑此表单集时，数据和图像已正确保存。

任何人都可以指出我的事件处理程序的错误吗？

Answer 1

我认为脚本有错误， $('#id_gallery_set-TOTAL_FORMS').attr('value', count);

行应该是：

$('#id_gallery_set-TOTAL_FORMS').attr('value', count + 1);

这里是解决这个问题的可行脚本和模板：

$(function() {
        $('.add-photo').click(function(ev){
            ev.preventDefault();
            var count = parseInt($('#id_gallery_set-TOTAL_FORMS').attr('value'), 10);
            var tmplMarkup = $('#gallery-template').html();
            var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count)
            console.log(compiledTmpl);
            $('div.gallery').append(compiledTmpl);
            $('#id_gallery_set-TOTAL_FORMS').attr('value', count + 1);
        });
    });

模板：

<form action="." method="post" enctype="multipart/form-data">
    {{ formset.management_form }}
    {% csrf_token %}

    <legend>Event</legend>
    <div class="event">
    {{ form}}
    </div>

    <legend>
        <div class="pull-right"><a href="#" class="btn btn-inverse add-photo"><i class="icon-plus icon-white"></i> Add Photo</a></div>
        Photo Gallery
    </legend>
    <div class="gallery form-inline">
        {% for form in formset %}
            {{ form.as_p }}
        {% endfor %}
    </div>
  <div class="form-actions">
     <button type="submit" class="btn btn-primary">Save</button>
   </div>
 </form>

希望对解决相关问题有所帮助。

javascript 事件处理程序无法在 Django 内联表单集中正常工作

javascript event handler not correctly work in django inline formset

javascript

django

jquery

inline-formset