2016-07-06 5 views
0

jsonをjqueryを使ってクイズに変換するscriptが見つかりました。jQuery onclickコール関数

私はそのコードをほぼ一日使い続けています。私は持っていたいものを持ってきません。

ファンクションquiz().init();およびquiz().bindSubmit();が呼び出されます。

私が欲しいのは、スタートボタンをクリックしてクイズを読み込む必要があります。

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

HTML:

それは、次の回のクリックでも STARTボタンの最初のクリックで働く
<button type="button" id="start">Start</button> 
<div id="quiz-content"></div> 

、それが成功したクイズをリセットし、#1に戻ります。

しかし、問題は最初のクリックスタートボタンの後、クイズは正常に動作しません。クイズは#1でくつろぎ始めました。

便宜のため、JSfiddle here

は編集: は基本的に何度も時にユーザーのクリック開始ボタンより、クイズは最初から開始されるが、次の質問(第一、質問自体に立ち往生)

+3

終わりにそれは混乱の文だあなたはそれが動作し、次のだと言うので、私は理解できなかったあなたはそれが私の上だけで罰金jsfiddle作品に –

+1

あなたのコードではないと述べブラウザ。私はクロムbtwを使用しています。 –

+0

@GeorgeGarchagudashvili問題はスタートボタンを最初にクリックした後で、クイズを送信するときにクイズが正常に機能しません。クイズは#1でくつろぎ始めました。開始ボタンを2〜3回押してから、クイズに答えてみてください。 – Jacob

答えて

4

ときに取得していませんbindSubmit関数を呼び出すと、#quizFormsubmitイベントに接続しています。したがって、開始ボタンを2回押すと、同じイベントに2つのイベントハンドラが接続されています。つまり、動作していないためです。だから、あなたは常にこのようなすべてのsubmitハンドラ($(document).off('submit');)、切断する必要bindSubmit関数内:ここ

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

を述べた更新 https://jsfiddle.net/t4p8x02b/35/

+0

あなたはスーパーヒーローです!それは動作します、ありがとう!あなたはこれを最善の解決策と考えていますか? – Jacob

+0

ありがとうございました。そのスクリプトのために私はそれが大丈夫だと思う。重要なことは、特にイベントハンドラを扱うときは、もはやそれらが必要なくなったときにそれらを常に切断することです。 – xxxmatko

+0

私はそれを私のプロジェクトに追加しました。残念ながら、スタートボタンをクリックすると、ページがリフレッシュされています。 – Jacob

0

を使用して、元のフィドルは、私はあなたのコードで観察され、物事のカップルがありますです

  • init()を外部に公開する必要はありませんquizライブラリでは、初回の初期化時にライブラリから返る前にinit()に電話することができます(quiz()モジュールコードの終わり)。
  • また、init()を公開すると、quiz()ロジック全体を損なうおそれのある外部プログラムによって変更される可能性があるため、quiz()モジュールは脆弱です。
  • インサイドbindSubmit()は、あなたは、あなたのイベントハンドラがエラー [これは閉鎖の魔法である]なしでそれを呼び出します(コードスニペットの下に参照してください)というだけでinit()を呼び出し、init()を呼び出すために再初期化クイズインスタンスに必要いけません。

bindSubmit():

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