jQuery onclick call function

Question

I've found a script that converts json file into quiz using jquery.

I am playing with it's code for almost a day now and I can't come with what I wanted to have.

Functions quiz().init(); and quiz().bindSubmit(); are called when page loaded.

What I want is the START button must be clicked first to load the Quiz.

$("#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>

It works at first click of START button also in the next clicks, it successfully reset the quiz and goes back to #1.

But the problem is after the first click of Start Button, the quiz won't work normally when submitting the quiz. The quiz began to stucked in #1.

For better understanding, JSfiddle here.

Edited: Basically when the user click start button more than once,the quiz gets started from the beginning ,but didn't get to the next question(Gets stuck on the 1st question itself)

at the end it's confusing statement, I could not understand because you say it's working and next you said it's not — George G
– George G, Commented Jul 6, 2016 at 11:16
your code on jsfiddle works just fine on my browser. im use chrome btw. — Yosi Azwan
– Yosi Azwan, Commented Jul 6, 2016 at 11:17
@GeorgeGarchagudashvili The problem is after the first click of Start Button, the quiz won't work normally when submitting the quiz. The quiz began to stucked in #1. Try to press Start button from two or three times then try to answer the quiz. — Jacob
– Jacob, Commented Jul 6, 2016 at 11:21
@YosiAzwan have you tried to click the start button multiple times? and then try to answer the quiz. It will stuck to #1 — Jacob
– Jacob, Commented Jul 6, 2016 at 11:23

xxxmatko · Accepted Answer · 2016-07-06 11:23:21Z

4

When you call bindSubmit function, inside it you are attaching to the submit event of the #quizForm. So when you press Start button twice, there two event handlers attached to the same event and that is because it is not behaving as it should be. So inside the bindSubmit function you need always disconnect all submit handlers ($(document).off('submit');), like this:

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

Here is your original fiddle with mentioned update https://jsfiddle.net/t4p8x02b/35/

answered Jul 6, 2016 at 11:23

xxxmatko

4,1522 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jacob Over a year ago

You're a superhero! It works, thanks!!! Would you consider this as the best solution?

xxxmatko Over a year ago

Thanks, you're welcome. For that script I think it is ok. What is important, especially when dealing with event handlers, is to always disconnect them when they are not needed anymore.

Jacob Over a year ago

I've added it to my project, unfortunately, when I click start button, it's refreshing the page.

xxxmatko Over a year ago

Check your html, whether you are not submitting the entire page because of some invalid html. Or try to return false; inside the $("#start").click function. When it works in the fiddle it should also work in your page.

Jacob Over a year ago

Fixed it. Found out that it affects other forms to refresh when it is submitted. I think it's because of $(document).off('submit'); other forms also has preventDefault(); but still refreshing. When I tried to remove the off('submit'), other forms can be submitted without refreshing the page. Any help? I tried $(document).on('submit'); when submitting other forms but no luck.

dreamweiver · Accepted Answer · 2016-07-06 12:19:41Z

There are couple of things i observed in your code, which needs to be rectified for better management of code:

There is no need to expose init() outside your quiz library, for first time initialization, you can call init() before your return from the library(end of quiz() module code).
Also exposing init() makes your quiz() module vulnerable since it can be modified by any external program which could spoil your entire quiz() logic.
Inside bindSubmit(), you dont need to re-initialize your quiz instance to call init(), rather just call init()(refer below code snippet), your event handler will call it without any error [This is the magic of Closure].

bindSubmit():

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

Collectives™ on Stack Overflow

jQuery onclick call function

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related