解說一樣都是點選物件後執行複製(clone())的動作,但為何使用Bind()複製的物件卻無法再複製,而live()和delegate()卻可以的原因。

解說一樣都是點選物件後執行複製(clone())的動作,但為何使用Bind()複製的物件卻無法再複製,而live()和delegate()卻可以的原因。


click,bind都是on的應用

解說jquery函式庫中,click的原理

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.01.05.71.jpg

解說使用bind時,同時也會使用on

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.01.36.71.jpg

運用console.log()測試點按效果

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.02.15.71.jpg

運行結果,點按<h2>,console視窗出現 clicked

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.02.22.71.jpg

這次不用bind的寫法,使用簡寫法,直接寫click

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.02.29.58.jpg

運行結果,同上效果,因click和bind('click')在jquery函式庫呼叫的是相同的方法

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.02.32.71.jpg

bind()與clone()

運用clone()來複製所點選的<h2>

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.03.33.92.jpg

運行結果,點按<h2>後,console視窗中出現[<h2>Click Me</h2>](為所點選的<h2>tag)

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.03.35.71.jpg

使用appendTo將複製的<h2>貼入<body>中

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.04.05.50.jpg

運行結果,點按<h2>後可看到複製的<h2>新增至畫面

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.04.10.75.jpg

但是點選新增的<h2>卻沒有辦法執行複製的動作,因為新增的<h2>前沒有bind,所以click的函式無法被運行

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.04.19.54.jpg

修改為 clone(true)

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.05.16.67.jpg

運行結果,點按新增的<h2>也可執行複製效果了

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.05.23.83.jpg

live()與clone()

將原先的bind()改為live(),並將clone()設為預設的寫法(不寫成clone(true))

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.06.09.00.jpg

運行結果,使用live 做binding,新增的<h2>,可運行複製效果。因使用live時,是對document做binding,click則是對<h2>,所以live對新增的<h2>仍可成功執行複製指令

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.06.15.50.jpg

delegate()與clone()

使用<div>將<h2>包起來

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.07.16.54.jpg

將live()的寫法改為delegate(),並指定binding的容器為div.container

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.08.24.46.jpg

至jquery函式庫中,解說delegate和undelegate在1.6.4版和1.7.1版的不同

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.08.56.71.jpg

解說1.7.1版,不論live,delegate,click都是使用on的函式

/images/coding-note/javascript/jQuery-30day/06.Bind-Live-Delegate-Huh/06.Bind-Live-Delegate-Huh-0.10.18.71.jpg