I use crispy-forms work in django,render failures after the first click the submit button,the second time click the submit button has no response
<p>I am ready to use crispy-froms to my django projection,but in the test,there happen a question,I do not know where happened mistakes.So I post the code here.
If someone can point out the mistake,I will appreciate it.
forms:</p>

<pre><code>class TestForm(forms.ModelForm):

    name = forms.CharField(widget=forms.TextInput(),label='Name',max_length=100,)

    def __init__(self,*args,**kwargs):
        super(TestForm, self).__init__(*args, **kwargs)

        self.helper = FormHelper()
        self.helper.add_input(Button('save', 'save'))
        self.helper.form_class = 'form-horizontal'
        self.helper.label_class = 'col-lg-3'
        self.helper.field_class = 'col-lg-8'
        self.helper.form_id = 'pkg-form'

        class Meta:
            model = PkgList
            fields = (
                'id','name',
             )
</code></pre>

<p>urls.py:</p>

<pre><code>url(r'^testform/$',test_form,name='test_form')
</code></pre>

<p>the views in my code:</p>

<pre><code>@json_view
def test_form(request):
    if request.method == 'POST'and request.is_ajax():
        form = TestForm(request.POST)
        if form.is_valid():
            return {'success': True}
        else:
            form_html = render_crispy_form(form)
            return {'success': False, 'form_html': form_html}

    else:
        if request.method == 'GET':
            form = TestForm()
            return render(request,'man/pkg_form.html',{'form':form})
</code></pre>

<p>templetes:</p>

<pre><code>&lt;div class="modal-dialog" xmlns="http://www.w3.org/1999/html"&gt;
    &lt;div class="modal-content message_align"&gt;
        &lt;div class="modal-body" align="center"&gt;
            &lt;span class="section"&gt;Pkg Info&lt;/span&gt;
            {% crispy form form.helper%}
        &lt;/div&gt;
    &lt;div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<pre><code>$('#button-id-save').on('click', function(event){
    event.preventDefault();
    var form = '#pkg-form';
    $.ajax({
        url: "{% url 'pkg_view' %}",
        type: "POST",
        data: $(form).serialize(),
        success: function(data) {
            if (!(data['success'])) {
                $(form).replaceWith(data['form_html']);
            }else {
                window.location.href = "{%url 'man/pkglist'  %}";
            }
        },
        error: function () {
            $(form).find('.error-message').show()
        }
    });
    return false;
});
</code></pre>

<p>after the first ajax POST and return {'success': False, 'form_html': form_html} from the backend,click the button can not send ajax POST no more.....</p>

<p>Most probably it's because your ajax event is bind to an element which is being replaced by the returned data. Try binding it to document.</p>

<p>Instead of </p>

<pre><code>$('#button-id-save').on('click', function(event){ ... }
</code></pre>

<p>Try this</p>

<pre><code>$(document).on("click", "#button-id-save", function(event){
  ...
});
</code></pre>

python ajax django