問題
html+javascriptでSinglePageApplicationを組んだら状態が遷移しなくて困ったという話。
前提
htmlとjavascriptに関する経験と知識がまったくなし。
とにかくやりたかったことをなんとか実現できたので、そのメモ。
解決策はただ常識かもしれない。
もっといい実装があればアドバイスを求む。
ハマりどころ
事の初め
動的にhtmlページを編集するためにjavascript/jQueryを使用。
いくつかのページ間の切り替えを、ページをpushすることで表示させるSPAを組んだ。
そのうちの一つのページ内で、ボタンをクリックすることで、リストに項目を追加する機能を実装したかった。
不測の事態
一度目のpushでは問題なく機能。
ページを再pushするとボタンが動作しなくなった。
原因
ボタンとリストのhtml idタグを使ったことが問題。
再度pushすることでhtml idが衝突して、新しく表示されているページを操作できなくなった。
解決策
idタグのまま行きたい場合
ボタンのクリック制御を.click(function{})から.on('click',function{})にする。
ダメなやつ
button-notworking.js
$('#button').click(function {doSomething!})
動くやつ
button-working.js
$('#button').off('click')
$('#button').on('click', function {doSomething!})
この方法はイベントについては何とかなるが、リストの.appendには使えない（？）
classタグを使用
idタグを諦めて、classタグを使って制御すれば衝突を回避できる。
ダメなやつ
list-notworking.js
$('#list').append(Something!)
動くやつ
list-working.js
$('.list').last().append(Something!)
同名classのうち一番最後のものが表示されているものなので、.lastで取得してきた。