0

我正在尝试向初次使用的用户展示如何使用我的网站。我决定为此使用弹出框。因此，我创建了几个元素，例如：

<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>

下面的代码将一一显示弹出框：

$('#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显示。可能是什么原因？

4

1 回答 1

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 基本上告诉浏览器侦听这些元素，因此如果它们突然出现在页面中（例如通过 ajax 请求显示、创建或拉入），您的 jquery 仍将作用于这些元素。

于 2012-08-27T18:50:54.640 回答