如何在 JQuery 步骤中有两个按钮

Question

我真的需要一些帮助。所以我使用了一个Jquery Steps PlugIn。现在在这个插件中，当我们转到last tab它时，它有一个按钮名称为“完成”，单击调用"onFinishing"方法。

onFinishing: function () {
            var loadedPrefix = MyNamespace.loadedPrefix;
            var inputBoxPrefix = $('#SitePrefix').val();
            $.ajax({
                type: 'POST',
                url: '/Settings/IsPrefixExists',
                data: { newPrefix: inputBoxPrefix, prefixLoadedFromDB: loadedPrefix },
                success: function (data) {
                      // do some stuff here
                    }
                },
                error: function () {
                    DisplayError('Failed to load the data.');
                }
            }); 
        }

现在上面工作得很好。但是我的经理希望我在那里有两个按钮。一个为“保存”，另一个为“提交”。单击它们中的每一个将执行不同的操作。但是这个插件只有一个“完成”按钮。它是通过插件的 Javascript 代码生成的。我可以以某种方式使用 JQuery/Javascript 在那里多一个按钮，并针对它编写一些代码。

JS 小提琴样本：JS 小提琴样本

图 1：

我想要如下图 2 所示的内容：

示例示例： JS FIDDLE

Answer 1

使用onStepChanged在Steps 插件文档中找到的事件...

你可以这样做：

$( window ).load(function() {
  $("#example-basic").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true,
    onFinishing: function () {
      alert("Hello");
    },
    onStepChanged:function (event, currentIndex, newIndex) {
      console.log("Step changed to: " + currentIndex);

      if(currentIndex == 2){
        console.log("ok");
        var saveA = $("<a>").attr("href","#").addClass("saveBtn").text("Save");
        var saveBtn = $("<li>").attr("aria-disabled",false).append(saveA);

        $(document).find(".actions ul").prepend(saveBtn)
      }else{
        $(".actions").find(".saveBtn").remove();
      }
      return true;
    },

  });


  // on Save button click
  $(".actions").on("click",".saveBtn",function(){
    alert("Saving!");
  });
});

更新了 JSFiddle