jQuery onclick调用函数

Question

我找到了一个使用jquery将json文件转换为测验的脚本 。

我正在使用它的代码将近一天，而我无法满足我的需求。

函数quiz().init(); 和quiz().bindSubmit(); 在页面加载时被调用。

我要的是必须首先单击“ 开始”按钮才能加载测验。

$("#start").click(function(){
    currentQuestion = 0;
    questionCount = 0;
    answerArray = [];
    infoMode = false;
    gotData = false;
    inMemoryData = [];
    quiz().init();
    quiz().bindSubmit();
});

HTML：

<button type="button" id="start">Start</button>
<div id="quiz-content"></div>

它在第一次单击“ 开始”按钮时也可以在下次单击时起作用，它成功重置了测验，并返回到＃1。

但是问题是第一次单击“ 开始”按钮后 ，提交测验时测验将无法正常进行。 测验开始陷入第一。

为了更好地理解， 请在此处使用JSfiddle 。

编辑：基本上，当用户多次单击“开始”按钮时，测验从头开始，但是没有到达下一个问题（卡在第一个问题本身上）

Answer 1

当你调用bindSubmit功能，里面要附加到submit的事件#quizForm 。 因此，当您按开始按钮两次时，有两个事件处理程序附加到同一事件，这是因为它的行为不正常。 因此，在bindSubmit函数内部，您始终需要断开所有submit处理程序（ $(document).off('submit'); ），如下所示：

var bindSubmit = function () {
  $(document).off('submit');
  $(document).on('submit', '#quizForm', function (event) {
    event.preventDefault();
    next(this);
    quiz().init();
  });
};

这是您提到的更新的原始提琴https://jsfiddle.net/t4p8x02b/35/

Answer 2

我在您的代码中观察到了几件事，为了更好地管理代码，需要对其进行纠正：

• 无需在quiz库外公开init() ，对于首次初始化，您可以在从库返回之前（在quiz（）模块代码的结尾init()调用init() ）。
• 另外，暴露init()会使您的quiz()模块容易受到攻击，因为它可以被任何可能破坏整个quiz()逻辑的外部程序修改。
• 在bindSubmit()内部，您无需重新初始化测验实例即可调用init() ，而只需调用init() （请参见下面的代码片段），事件处理程序将调用它而不会出现任何错误[这是Closure的神奇之处] 。

bindSubmit（）：

    $(document).on('submit', '#quizForm', function (event) {
         event.preventDefault();
         next(this);
         init();
    });