如何製作彈出使用教程？

我想顯示第一次用戶如何使用我的網站。我決定爲此使用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 ），然後按Next，下一個顯示（help-subscribe）;但在此之後Next按鈕不起作用，help-rss未顯示。但是，如果我先顯示help-subscribe，則Next按鈕將起作用，並顯示help-rss。可能是什麼原因？

來源

2012-08-27 LA_

有你嘗試使用一些jQuery插件？ –

@ShankarCabus，no - 第二個鏈接是數據內容的一部分。 –

@ShankarCabus，一些jquery插件？做什麼的？ –

我認爲，如果元素的id隱藏，當你調用。點擊它不會工作，一旦所示，您需要使用jQuery的。對http://api.jquery.com/on/

所以儘量用。對替換您。單擊像這樣：

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

。對基本上告訴瀏覽器監聽這些元素讓你的jQuery將仍然在這些因素作用，如果他們突然出現在頁面（如顯示，創建或通過Ajax請求拉入。

來源

2012-08-27 18:50:54 WebweaverD

謝謝，它可以很好的使用'.on'。在你的回答中有小小的錯字，「身體」應該用「身體」來代替。而且，我沒有看到我的html的任何錯誤... –

我已經糾正了其他任何人看，就像我說我認爲錯誤可能是你粘貼它的地方，數據內容是開放式的，沒有關閉到標籤，也只是在help-next-rss id後面有兩個錨定結束標籤和一個流氓'>'：id ='help-next-rss'> Next「> RSS – WebweaverD

仍然沒有看到問題））。只是爲了簡單 - 我的HTML像下面的'

如何製作彈出使用教程？

回答

相關問題