2.6_Bind、Live、Delegate事件觸發的不同
解說一樣都是點選物件後執行複製(clone())的動作,但為何使用Bind()複製的物件卻無法再複製,而live()和delegate()卻可以的原因。
click,bind都是on的應用
解說jquery函式庫中,click的原理
解說使用bind時,同時也會使用on
運用console.log()測試點按效果
運行結果,點按<h2>,console視窗出現 clicked
這次不用bind的寫法,使用簡寫法,直接寫click
運行結果,同上效果,因click和bind('click')在jquery函式庫呼叫的是相同的方法
bind()與clone()
運用clone()來複製所點選的<h2>
運行結果,點按<h2>後,console視窗中出現[<h2>Click Me</h2>](為所點選的<h2>tag)
使用appendTo將複製的<h2>貼入<body>中
運行結果,點按<h2>後可看到複製的<h2>新增至畫面
但是點選新增的<h2>卻沒有辦法執行複製的動作,因為新增的<h2>前沒有bind,所以click的函式無法被運行
修改為 clone(true)
運行結果,點按新增的<h2>也可執行複製效果了
live()與clone()
將原先的bind()改為live(),並將clone()設為預設的寫法(不寫成clone(true))
運行結果,使用live 做binding,新增的<h2>,可運行複製效果。因使用live時,是對document做binding,click則是對<h2>,所以live對新增的<h2>仍可成功執行複製指令
delegate()與clone()
使用<div>將<h2>包起來
將live()的寫法改為delegate(),並指定binding的容器為div.container
至jquery函式庫中,解說delegate和undelegate在1.6.4版和1.7.1版的不同
解說1.7.1版,不論live,delegate,click都是使用on的函式