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>

以下のようなコードで、ポップオーバーを 1 つずつ表示します。

$('#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.onhttp://api.jquery.com/on/を使用する必要があります。

したがって、.clickを.onに置き換えてみてください。

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

.onは基本的に、これらの要素をリッスンするようにブラウザに指示します。これにより、jqueryは、これらの要素がページに突然表示された場合でも、これらの要素に作用します（たとえば、ajaxリクエストを介して表示、作成、またはプルされます）。

于 2012-08-27T18:50:54.640 に答える