之前遇到過一次.click()無效，改成on繫結click就好了的情況，看了幾篇部落格後，發現是自己對click()和on的理解不夠，沒太在意，最近又遇到了，所以寫下這篇部落格加深印象。

$(選擇器).click(fn)：當選中的選擇器被點選時觸發回撥函式fn。只針對與頁面已存在的選擇器。而.J_del這個刪除按鈕是通過append加到頁面上的 。所以.click()無效

.$(document).on('click','要選擇的元素',function(){})
　　  on方法包含很多事件，點選，雙擊等等事件。和$().click()的用法一樣，最大的區別即優點是如果動態建立的元素在該選擇器選中範圍內是能觸發回撥函式。即動態建立的元素也能觸發事件 

另外這樣寫也不可以

因為通過on或click繫結的事件只對當前存在的元素有效， 即on前面的元素必須在頁面載入的時候就已經存在dom裡,所以後新增的類名為.del的按鈕無效

可以像這樣把事件繫結到.del的父元素上（事件委託），注意父元素必須是已經存在dom裡，而不是後面動態新增的。

 $().on()的知識點補充：

 1.

$().on()支援直接在目標元素上繫結事件，也支援在目標元素的祖輩元素上委託繫結。在事件委託繫結模式下，即使是執行on()函式之後新新增的元素，只要它符合條件，繫結的事件處理函式也對其有效。

此外，該函式可以為同一元素、同一事件型別繫結多個事件處理函式。觸發事件時，jQuery會按照繫結的先後順序依次執行繫結的事件處理函式。

要刪除通過on()繫結的事件，請使用off()函式。如果要附加一個事件，只執行一次，然後刪除自己，請使用one()函式。

該函式屬於jQuery物件(例項)。

2.

從jQuery 1.7開始，on()函式提供了繫結事件處理程式所需的所有功能，用於統一取代以前的bind()、 delegate()、 live()等事件函式。
$().bind()直接繫結在元素上，和click，blur，mouseon一樣的點選事件。
$().live()是通過冒泡的方式來繫結到元素上的。更適合列表型別的，繫結到document DOM節點上。
$().delegate()是更精確的小範圍的使用事件代理。
$().on()結合了這三個方法的優勢摒棄了劣勢。

3.

該函式可以為同一元素、同一事件型別繫結多個事件處理函式。觸發事件時，jQuery會按照繫結的先後順序依次執行繫結的事件處理函式。

4. 阻止事件冒泡和事件委託的方法：
return false。 
在事件的處理中，可以阻止預設事件和冒泡事件。

event.preventDefault()
在事件的處理中，可以阻止預設事件但是允許冒泡事件的發生。

event.stopPropagation().。
在事件的處理中，可以阻止冒泡但是允許預設事件的發生。