todo 削除リンク作成とクリック時の処理
#07 Todo更新情報をDBへ反映を削除してみよう (1)
http://dotinstall.com/lessons/todo_app_php_v2/9307
を参考に、Todo更新情報をDBへ反映 を削除するリンクを作って
クリックしたときの処理を作成する
また
今後多用する jQuery の .on() については
http://www.jquerystudy.info/reference/events/on.html
の解説を参考にするとわかりやすい
昔のソースだと
.bind() でかかれているのもあるけど
この .bind() の場合
動的に追加した要素にイベントを設定できない
ではまずはリンクを作成したいので
index.phpを編集する
[pho]
[/pho]
の下に
span 要素を追加する
[pho]
[削除][/pho]
span要素は、それ自体は何の意味ももたないけど
CSSとか java script などと合わせることで
いろいろ使える
http://www.tohoho-web.com/html/span.htm
のリファレンスが参考になる
そして、このspan をCSS適用でリンクボタンのように
見せる
1 2 3 4 5 6 | <style> .delete-taks{ cursor: pointer; color: blue; }</style> |
とする
1 | curosr :pointer |
とすると、リンクボタンのようになる
.delete-task は id=”delete-task” という意味
今回 span 要素を使っているのは、リンクするためではなく、クリックするのをつくるため
次に
1 | <span class="delete-task">[削除]</span> |
をクリックしたときのQuery で書く
1 2 3 4 5 | <script>$(function(){});</script> |
jQuery を扱うにはこの中へ書いていく
クリックしたときの処理をするには
.on() を使う
1 2 3 | $(document).on('cluck','delete-task',function(){}); |
on() の引数は
動作 =クリックなので click
対象 = id=”delete-task”のところ
行う処理 = function(){} の中身
となる
で行う処理は
1 2 3 | if(confirm('本当に削除しますか？')){} |
というように
確認ダイアログを confirm() で出している
confirm() については
http://www.htmq.com/js/window_confirm.shtml
のリファレンスを参考にする