之前遇到過一次.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().。
在事件的處理中，可以阻止冒泡但是允許默認事件的發生。

?

?

總結

以上是生活随笔為你收集整理的.click()与on('click',function())的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。