出现Bootstrap popover虽然它应该被隐藏(Bootstrap popover appears although it should be hidden)

嘿，我想要做的是遵循：

我有不同的按钮用于浏览器游戏的关卡选择。 每个按钮代表一个级别。 在用户选择一个级别后，他必须单击“开始”按钮以转到所选级别。 var level获取特定级别按钮的值。 例如，用户选择第一级，因此var level = 1 ;

当他点击START按钮而不选择关卡时，会出现一个内容为“首先选择关卡”的弹出框。 要通过单击任意位置或单击级别按钮来隐藏弹出窗口，请使用以下代码。 var level = undefined ，然后只能调用popover。 在用户选择了级别后， var level不再是未定义的，并且无法再次调用popover。

到现在为止还挺好。

通过单击“开始”按钮而不选择级别来显示弹出窗口，并通过选择级别消失。 但是当用户现在点击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>
Hey what I'm trying to do is following:
 
I have different buttons for a level selection for a browser game. Each button stands for one level. After the user selects a level he has to click the START button to go to the chosen level. var level gets the value of the certain level button. e.g. user chooses level one, so var level = 1;
 
When he clicks on the START button without choosing a level there'll appear a popover with the content "choose a level first". To hide the popover by clicking anywhere or by clicking on a level button I use the following code. At the beginning var level = undefined and only then the popover can be called. After the user chose a level var level is not undefined anymore and the popover cannot be called again. 
 
So far so good.
 
The popover appears by clicking on the START button without choosing a level and disappears by selecting a level. But when the user now clicks on the START button the popover appears again. How is this possible? 
 
$('#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>

                
最满意答案
                
                    
                        
 快速解决方法是更改$('#start').popover('hide'); to $('#start').popover('destroy'); 还将data-trigger="manual"到按钮 
 
 以下是我实现此方案的方式， 
 
 $(document).bind("click touchstart", function(f) {
  if(f.target.id!="start"){
   if(isVisible)
   {
     $('#start').popover('destroy');
     isVisible = false;
   }
  }  
   else if (level==undefined && !isVisible) {       
    $('#start').popover('show');
    isVisible =true;
  }  
  });
A quick fix would be to change $('#start').popover('hide'); to $('#start').popover('destroy'); also add data-trigger="manual" to the button
 
Below is the way which I have implemented this scenario,
 
 $(document).bind("click touchstart", function(f) {
  if(f.target.id!="start"){
   if(isVisible)
   {
     $('#start').popover('destroy');
     isVisible = false;
   }
  }  
   else if (level==undefined && !isVisible) {       
    $('#start').popover('show');
    isVisible =true;
  }  
  });