我的JavaScript函数仅触发一次

Question

I have a pretty basic step by step wizard I created. When you select an option from a drop down menu on page 1, I load a new page via jQuery ajax. If you hit back, it loads the original page again.

However after loading the original page again, my modelSelect() function that loads page 2 stops working. Doesn't fire at all. I'm not exactly sure what I'm doing wrong.

I'm hoping someone can see what I'm doing wrong. My code is below:

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

Simple delegation.

Adding jQuery(document).on('change', '.select-model', function(){ on line 29 made it work.

Answer 2

Change your this line:

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

to this

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

because if HTML is loaded after page load OR by some kind of JS, you need to deattach event and then attach back,