Meine Javascript-Funktion feuert nur einmal

Question

Ich habe eine ziemlich grundlegende Schritt für Schritt Assistenten, die ich erstellt habe. Wenn Sie eine Option aus einem Dropdown-Menü auf Seite 1 auswählen, lade ich eine neue Seite über jQuery ajax. Wenn Sie zurückschlagen, wird die Originalseite erneut geladen.

Nach dem Laden der Originalseite funktioniert meine modelSelect() Funktion, die Seite 2 lädt nicht mehr. Schiesst überhaupt nicht. Ich bin mir nicht ganz sicher, was ich falsch mache.

Ich hoffe, dass jemand sehen kann, was ich falsch mache. Mein Code ist unten:

//Collapse panel handling 
var group = jQuery('.estimator-container'); 
jQuery('.tab-click').click(function() { 
    group.find('.collapse.in').collapse('hide'); 
    jQuery(this).parent().toggleClass('active'); 
}); 

---

/* -------------------------------------- *\ 
     New form handler 
    \* -------------------------------------- */ 

    function modelSelect(v) { 
     jQuery('#page_2, .estimator-container').toggle(); 
     // Ajax for loading page_2 
     jQuery.ajax({ 
      type: "POST", 
      data: v, 
      success: function() { 
       jQuery('.estimator-app').load(templateUrl + "/page-estimator2.php?p=" + v); 
      } 
     }); 
    } 


    jQuery('.estimator-panel').on('change', '.select-model', function() { 
     var v = jQuery(this).val(); 
     modelSelect(v); 
    }); //end on change function 

    // Back and continue handling 
    jQuery('.estimator-app').on('click', '.estimator_form_btn_next', function() { 
     var backBtn = jQuery('.estimator_form_btn_back'); 
     var continueBtn = jQuery('.estimator_form_btn_next'); 
     var firstPage = jQuery('#contact-first-page'); 
     var lastPage = jQuery('#contact-last-page'); 

     if (firstPage.is(":visible")) { 
      firstPage.toggle(); 
      lastPage.toggle(); 
     } 
    }); //end continue 

    // Go back 
    jQuery('.estimator-app').on('click', '.estimator_form_btn_back', function() { 
     var backBtn = jQuery('.estimator_form_btn_back'); 
     var continueBtn = jQuery('.estimator_form_btn_next'); 
     var firstPage = jQuery('#contact-first-page'); 
     var lastPage = jQuery('#contact-last-page'); 

     if (lastPage.is(":visible")) { 
      firstPage.toggle(); 
      lastPage.toggle(); 
     } else { 
      jQuery.ajax({ 
       type: "POST", 
       // data: v, 
       success: function() { 
        jQuery('.estimator-app').load(templateUrl + "/estimator-initial.php"); 
       } 
      }); 
     } 

    }); //end continue 

Answer 1

Einfache Delegation.

Hinzufügen von jQuery(document).on('change', '.select-model', function(){ auf Zeile 29 hat es funktioniert.

Answer 2

Sie diese Zeile ändern:

jQuery('.estimator-panel').on('change', '.select-model', function() { 

dazu

jQuery(document).off('change', '.select-model').on('change', '.select-model', function(e){ 
    e.preventDefault(); 

denn wenn HTML nach Laden der Seite oder durch irgendeine Art von JS geladen wird, müssen Sie Ereignis deattach und dann befestigen zurück,