Jquery Fuel UX向导更改事件

我正在使用页面上的Fuel UX向导控件。在使用向导控件的“上一步”和“下一步”按钮时，我能够使用“更改”功能，并且可以使用页面上的单独控件触发事件。“更改”事件之所以如此重要，是因为当用户导航到该步骤时，所有内容都是通过ajax加载的

我遇到的问题涉及在向导控件中单击步骤本身时，不会触发“更改”事件，因此不会加载内容。我的问题是如何强制wizard.js类中的“stepclicked”事件调用“change”事件，以便加载内容，最好不更改wizard.js文件的任何内容

$("#MyWizard").wizard().change(function(e, data) {
        switch (data.step) {
        case 1:
            if (data.direction == "next") {
                GetExclusionLoad();
            }
            break;
        case 2:
            if (data.direction == "previous") {
                GetRevenueLoad();
            } else if (data.direction == "next") {
                GetWithholdingLoad();
            }
            break;
        case 3:
            if (data.direction == "next") {
                GetProcessBeginLoad();
            } else if (data.direction == "previous") {
                GetExclusionLoad();
            }
            break;
        case 4:
            if (data.direction == "next") {

            } else if (data.direction == "previous") {
                GetWithholdingLoad();
            }
            break;
        }
    });

解决方案：多亏了@michaelmikowski，我才能够通过一些小的改变来解决这个问题

        var onChangeWizard, onClickWizard, onDirectionWizard, $myWizard,
        stateMap = {
            wizard_step_idx: 1,
            wizard_direction_str: 'next'
        };

    onChangeWizard = function(event, data) {
        var stepIdx = data.step || 1;
        var directionStr = data.direction || '';

        if (directionStr === 'next' && stepIdx < 4) {
            stepIdx++;
        } else if (directionStr === 'previous' && stepIdx > 0) {
            stepIdx--;
        }

        // save state      
        stateMap.wizard_step_idx = stepIdx;
        stateMap.wizard_direction_str = directionStr;

        switch (stepIdx) {
        case 1:
            GetRevenueLoad();
            break;
        case 2:
            GetExclusionLoad();
            break;
        case 3:
            GetWithholdingLoad();
            break;
        case 4:
            GetProcessBeginLoad();
            break;
        }
    };

    $myWizard = $('#MyWizard');

    $myWizard.on('change', function(event, data) {
        onChangeWizard(event, {
            step: data.step,
            direction: data.direction
        });
    });
    $myWizard.on('stepclick', function(event, index) {
        onChangeWizard(event, {
            step: index.step,
            direction: 'click'
        });
    });

var onChangeWizard、onClickWizard、onDirectionWizard、$myWizard、，
状态映射={
向导\u步骤\u idx:1，
向导\u方向\u str:“下一步”
};
onChangeWizard=函数（事件、数据）{
var stepIdx=data.step | | 1；
var directionStr=data.direction | |“”；
if（directionStr=='next'&&stepIdx<4）{
stepIdx++；
}else if（directionStr=='previous'&&stepIdx>0）{
stepIdx--；
}
//拯救国家
stateMap.wizard\u step\u idx=stepIdx；
stateMap.wizard\u direction\u str=directionStr；
开关（stepIdx）{
案例1：
GetRevenueLoad（）；
打破
案例2：
getExclutionLoad（）；
打破
案例3：
getStoppingLoad（）；
打破
案例4：
GetProcessBeginLoad（）；
打破
}
};
$myWizard=$（“#myWizard”）；
$myWizard.on（'change'，函数（事件、数据）{
onChangeWizard（事件{
步骤：data.step，
方向：data.direction
});
});
$myWizard.on（'stepclick'，函数（事件、索引）{
onChangeWizard（事件{
步骤：index.step，
方向：“点击”
});
});

如果我理解正确，您应该能够将处理程序打包到函数中，然后将其绑定以进行更改并单击，如下所示：

var
  onChangeWizard, onClickWizard, $myWizard,
  stateMap = { 
    wizard_step_idx      : 1,
    wizard_direction_str : 'next'
  };

onChangeWizard = function ( event, data ){
  var 
    step_idx      = data.step      || 1;
    direction_str = data.direction || '';

  if ( direction_str === 'next' && step_idx < 4 ) {
    step_idx++;
  }
  else if ( direction_str === 'previous' && step_idx > 0 ){
    step_idx--;
  }

  // save state      
  stateMap.wizard_step_idx      = step_idx;
  stateMap.wizard_direction_str = direction_str;

  switch( step_idx ) {
    case 1 : loadRevenue();      break;
    case 2 : loadExclusion();    break;
    case 3 : loadWithholding();  break;
    case 4 : loadProcessBegin(); break;
  }
};

onClickWizard = function ( event ) {
  onChangeWizard( event, {
    step      : stateMap.wizard_step_idx,
    direction : stateMap.wizard_direction_str
  });
  return false;
};

$myWizard = $('#MyWizard');

$myWizard.on( click, onClickWizard );
$myWizard.wizard().change( onChangeWizard );

var
onChangeWizard，onClickWizard，$myWizard，
stateMap={
向导\u步骤\u idx:1，
向导\u方向\u str:“下一步”
};
onChangeWizard=函数（事件、数据）{
变量
步骤| idx=数据。步骤| 1；
方向_str=data.direction | |“”；
如果（方向=下一步和步骤=idx<4）{
step_idx++；
}
else if（方向_str=='previous'&&step_idx>0）{
步骤_idx--；
}
//拯救国家
stateMap.wizard\u step\u idx=step\u idx；
stateMap.wizard\u direction\u str=方向\u str；
开关（步骤_idx）{
案例1:loadRevenue（）；中断；
案例2：负载排除（）；中断；
案例3：加载预扣（）；中断；
案例4:loadProcessBegin（）；中断；
}
};
onClickWizard=函数（事件）{
onChangeWizard（事件{
步骤：stateMap.wizard\u步骤\u idx，
方向：stateMap.wizard\u direction\u str
});
返回false；
};
$myWizard=$（“#myWizard”）；
$myWizard.on（单击，单击向导）；
$myWizard.wizard（）.change（onChangeWizard）；

上面的示例假定单击向导内容将继续用户先前选择的方向。但是，您可能希望它一直向前推进

---

switch语句的逻辑通过首先计算阶跃变化，然后请求AJAX加载来简化。

谢谢。它就像一个符咒。单击步骤时会触发一个“stepclick”事件，我可以将其绑定并使用“index”值设置要移动到的步骤。谢谢你简化了开关，让我的生活轻松多了。