JQuery Load является дублирующим поведением в шаблоне django

Question

Я пытаюсь заполнить страницу с помощью метода jquery.load(). Загрузка работает нормально, но форма внутри вновь загруженной части дублирует ее поведение при отправке события.

Соответствующие JQuery часть:

$('#settings').on('click',function(event){ 
      var tax_submit_url = "{% url 'clinic_tax_submit' %}"; 
      $('.right_col:visible').load(tax_submit_url); 
      return false; 
     }); 

HTML часть (внутри dashboard.html)

<div id="sidebar-menu" class="main_menu_side hidden-print main_menu"> 
    <div class="menu_section"> 
    <ul class="nav side-menu"> 
     <li><a href="{% url 'clinic:clinic_dashboard' %}"><i class="fa fa-home"></i> Home </a></li> 
     <li><a><i class="fa fa-edit"></i> Appointments <span class="fa fa-chevron-down"></span></a> 
     <ul class="nav child_menu"> 
      <li id="doctors"><a>Doctors<span class="fa fa-chevron-down"></span></a> 
      <ul class="nav child_menu"> 
       {% for membership in memberships %} 
       <li class="sub_menu membership_button" id="membership_{{membership.id}}" data="{% url 'clinic_doctor_scheduler' membership.doctor.slug %}"> 
       <a> 
       <span><h6 style="margin:0">{{ membership.doctor }}</h6></span> 
       <span style ="color:#1abb9c;"><small>{{ membership.doctor.doctorSpecial }}</small></span> 
       </a> 
       </li> 
       {% endfor %} 
      </ul> 
      </li> 
     </ul> 
     </li> 
     <li><a><i class="fa fa-desktop"></i> Billing & Invoicing <span class="fa fa-chevron-down"></span></a> 
     <ul class="nav child_menu"> 
      <li id="invoicing_summary"><a> Invoicing Summary </a></li> 
      <li id="settings"><a> Settings </a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 
<!-- /sidebar menu --> 
<div class="right_col" role="main"> 
</div> 

Форма внутри шаблона

<div class="col-xs-4" style="float:right;"> 
    <h3>Add Another Tax</h3> 
    <br> 
    <form class="taxes_form" method="POST" action=""> 
     {{ taxes_form.as_p }} 
     <button class="primaryAction btn-success" type="submit" style="width:100%;">Submit</button><br/> 
    </form> 
    <div class="alert alert-success" role="alert" style="display:none !important;"> 
    <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <strong>Success!</strong> You have added a tax successfully! 
    </div> 
</div> 

Просмотр для визуализации taxes.html, который будет загружен в dashboard.html

def clinic_tax_submit(request): 
    print "inside clinic tax submit" 
    if request.user.is_authenticated(): 
     invoice_taxes = Invoice_taxes.objects.filter(clinic_id=request.user.clinic.id) 
     context = { 
      'invoice_taxes': invoice_taxes, 
      'taxes_form': TaxesForm, 
     } 
     return render(request,'clinic/taxes.html',context) 
    else: 
     raise Http404() 

Answer 1

Хотя это Hacky способ делать вещи, если вы не нашли ничего другого, используйте event.stopImmediatePropagation() на событие click, которое дает повторяющееся поведение. !!