Question

我正在尝试向用户展示如何使用我的网站。我已决定使用popovers。所以，我创建了几个元素，如：

<li><a href="/rss/{{ user_id }}" id="help-rss" rel="popover" data-title="RSS feed" data-placement="bottom" data-trigger="manual" data-content="Use your favourite RSS reader to get our news!<br><br><a href='#' id='help-next-rss'>Next</a>">RSS</a></li>

下面的代码一个接一个地显示popovers：

$('#help-movie').popover('show');

$("#help-next-movie").click(function() {
  $('#help-movie').popover('hide');
  $('#help-subscribe').popover('show');
});
$("#help-next-subscribe").click(function() {
  $('#help-subscribe').popover('hide');
  $('#help-rss').popover('show');
});

但它无法正常工作 - 首先显示弹出窗口（help-movie），然后按下一步，显示下一个（help-subscribe）;但在此之后，“下一步”按钮不起作用，help-rss未显示。但是，如果我先显示help-subscribe，则会显示“下一步”按钮并显示help-rss。可能是什么原因？

Answer 1

我认为如果你调用.click时隐藏了元素id，它一旦显示就无法工作，你需要使用jquery .on http://api.jquery.com/on/

所以尝试用.on替换你的.click就像这样：

$('body').on("click", "#help-next-subscribe", function(event){
     $('#help-subscribe').popover('hide');
     $('#help-rss').popover('show');  
});

.on基本上告诉浏览器监听这些元素，这样如果它们突然出现在页面中，你的jquery仍会对这些元素起作用（例如通过ajax请求显示，创建或拉入。

如何使用popovers使用教程？

1 个答案: