Моя функция javascript срабатывает только один раз

Question

У меня есть довольно простой шаг за шагом, который я создал. Когда вы выбираете опцию из выпадающего меню на стр. 1, я загружаю новую страницу через jQuery ajax. Если вы нажмете назад, он снова загрузит исходную страницу.

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

Я надеюсь, что кто-то может понять, что я делаю неправильно. Мой код ниже:

//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

Простая делегация.

Добавление jQuery(document).on('change', '.select-model', function(){ в строке 29 заставило его работать.

Answer 2

Измените эту строку:

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

этому

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

, потому что, если загружен HTML после загрузки страницы или по какой-то JS, вам нужно deattach событие, а затем прикрепить обратно,