こんにちは。E-kan株式会社の岡田です。

先日、モーダルウィンドウ内にスライドショーを実装していて少しハマったので備忘録なぞ。
ソースは、必要なところだけ簡単に書き出すと以下のような感じ。

<div id="tour-dot">
  <button type="button" id="tour-dots-1" class="active"></button>
  <button type="button" id="tour-dots-2"></button>
  <button type="button" id="tour-dots-3"></button>
  <button type="button" id="tour-dots-4"></button>
</div>
<button type="button" id="tour-next">次へ</button>

$( "#tour-next" ).on( "click", function() {
  tour.next();
} );
$( "#tour-end" ).on( "click", function() {
  tourEnd();
} );

「次へ」ボタンをクリックするとスライドを次にめくる。
#tour-dot 内の各button要素はスライドの現在位置を示すナビゲーションで #tour-dots-1〜3 に .active がついている場合は「次へ」ボタンはデフォルトの #tour-next のまま。
#tour-dots-4 に .active が付与されると「次へ」ボタンのidは #tour-end に変わり、クリックすると終了画面が現れる。

idの書き換えは上手くいくのですが、「次へ」ボタンのイベントがスライドをめくる動作のままで終了画面に遷移してくれなかったんですよね。
で、イベントを書き換える方法を探したところ、以下の方法で解決。

$(document).on("click", "#tour-end", function() {
  tourEnd();
});

なんのことはない、on(click) に、書き換えたid #tour-end を引数として指定してあげれば無事にイベントを書き換えてくれました。

めでたしめでたし。

【E-kan株式会社ではオンラインもくもく会を開催しています。詳しくはこちら↓】
https://elabo-mokumoku.connpass.com/event/231225/