twitter-bootstrap - ブートストラップのポップオーバーが表示されますが、非表示にする必要があります

Question

ねえ、私がやろうとしていることは次のとおりです。

ブラウザ ゲームのレベル選択用にさまざまなボタンがあります。各ボタンは 1 つのレベルを表します。ユーザーがレベルを選択した後、選択したレベルに移動するには、START ボタンをクリックする必要があります。var level特定のレベル ボタンの値を取得します。たとえば、ユーザーはレベル 1 を選択しますvar level = 1。

レベルを選択せず​​に START ボタンをクリックすると、「最初にレベルを選択してください」という内容のポップオーバーが表示されます。任意の場所をクリックするかレベル ボタンをクリックしてポップオーバーを非表示にするには、次のコードを使用します。var level = undefinedポップオーバーを呼び出すことができるのは、最初とその後だけです。ユーザーが選択したレベルvar levelはもはや未定義ではなく、ポップオーバーを再度呼び出すことはできません。

ここまでは順調ですね。

ポップオーバーは、レベルを選択せず​​に START ボタンをクリックすると表示され、レベルを選択すると消えます。しかし、ユーザーが [START] ボタンをクリックすると、ポップオーバーが再び表示されます。これはどのように可能ですか？

$('#start').bind("click touchstart", function(e) {
    if (level==undefined) {
        $('#start').popover();
        isVisible = true;
        clickAway = false;
        e.preventDefault();
    }
});

$(document).bind("click touchstart", function() {
    if(isVisible && clickAway) {
        $('#start').popover('hide');
        isVisible = false;
        clickAway = false;
    } else {
        clickAway = true;
    }
}); 

<button type="submit" class="btn btn-success btn-large" rel="popover" data-placement="left" data-content="Choose level first!" value="" id="start" name="start">START!</button>