¿Cómo hacer un tutorial con el uso de popovers?

I am trying to show first time users how to use my website. I've decided to use popovers for this. So, I've created several elements like:

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

And the code like below to show popovers one by one:

$('#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');
});

But it doesn't work properly - first popover is shown (help-movie), then I press Next, next one is shown (help-subscribe); but after that Next button doesn't work, help-rss is not shown. But if I show help-subscribe first, then Next button works and help-rss is shown. What can be the reason?

preguntado el 27 de agosto de 12 a las 19:08

Have you tried using some jquery plugin? -

@ShankarCabus, no - 2nd link is part of data-content. -

@ShankarCabus, some jquery plugin? What for? -

Try this, @LA_: revaxarts-themes.com/tour -

1 Respuestas

I think if the element id hidden when you call .click it will not work once it is shown, you need to use jquery .on http://api.jquery.com/on/

so try replacing your .click with .on like so:

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

.on basically tells the browser to listen for these elements so your jquery will still act upon those elements if they suddenly appear in the page (e.g. are shown, created or pulled in via ajax request.

Respondido 28 ago 12, 12:08

Thanks, it works well with .on. There is small typo in your answer, body debe ser reemplazado por 'body'. And, I don't see any mistake with my html... - LOS_

I've corrected that for anyone else looking, like I say i think the mistake is probably where you pasted it in, data-content is open ended and no close to the tag, also, just after help-next-rss id there are two anchor closing tags and a rogue '>' : id='help-next-rss'>Next</a>">RSS</a> - SwiftD

Still don't see the problem )). Just to make it simple - my html like below <a href="link" data-content="text<br><br><a href='#' id='help-next-rss'>Next</a>">RSS</a>. Asi que, data-content contains the link. - LOS_

Sorry, my bad. I've just pasted it out and it is absolutely fine. I haven't used html inside data-content before and I misread it. I have edited my answer so there is no confusion for anyone reading it in the future. ...makes me look like more of a pro too lol - SwiftD

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.