Question

我创建了一个非常基本的一步一步的向导。当您从第1页的下拉菜单中选择一个选项时，我通过jQuery ajax加载一个新页面。如果您回击，它会再次加载原始页面。

然而，在再次加载原始页面后，加载第2页的modelSelect()功能停止工作。根本不开火。我不确定我做错了什么。

我希望有人能看出我做错了什么。我的代码如下：

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

简单授权。

在第29行添加jQuery(document).on('change', '.select-model', function(){使其有效。

Answer 2

更改此行：

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

到这个

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

因为如果在页面加载后或者通过某种JS加载HTML，你需要重新附加事件然后附加回来，

我的javascript函数只触发一次

2 个答案: