jquery的.click()點擊事件，通常都是可以正常使用的。有時選中的選擇器被點擊時無法觸發(fā)回調(diào)函數(shù)。這是為什么呢？改成on綁定click就可以了嗎？面對這樣的情況，on('click',function())應(yīng)該如何使用？

.click()無效的原因

$(選擇器).click(fn)：當選中的選擇器被點擊時觸發(fā)回調(diào)函數(shù)fn。

只針對與頁面已存在的選擇器。如果該選擇器是使用append(),prepend和 after(),before() 等方法后期動態(tài)添加的，.click()無效。

on('click',function())的正確使用

改成on('click',function())就可以使用了嗎？

下面示例test元素為動態(tài)添加

$(".test") .on('click' , function () {
$(this).parent().remove()
})

點擊無效，因為通過on或click綁定的事件只對當前存在的元素有效， 即on前面的元素必須在頁面加載的時候就已經(jīng)存在dom里,所以后添加的類名為.test的按鈕無效。

修改成下面示例

$(".login") .on('click' , '.test',function () {
$(this).parent().remove()
})

可以像這樣把事件綁定到.test的父元素(.login)上（事件委托），注意父元素必須是已經(jīng)存在dom里，而不是后面動態(tài)添加的。

可以直接使用$(document).on('click','要選擇的元素',function(){})

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

 1、$().on()支持直接在目標元素上綁定事件，也支持在目標元素的祖輩元素上委托綁定。在事件委托綁定模式下，即使是執(zhí)行on()函數(shù)之后新添加的元素，只要它符合條件，綁定的事件處理函數(shù)也對其有效。

此外，該函數(shù)可以為同一元素、同一事件類型綁定多個事件處理函數(shù)。觸發(fā)事件時，jQuery會按照綁定的先后順序依次執(zhí)行綁定的事件處理函數(shù)。

要刪除通過on()綁定的事件，請使用off()函數(shù)。如果要附加一個事件，只執(zhí)行一次，然后刪除自己，請使用one()函數(shù)。

該函數(shù)屬于jQuery對象(實例)。

2、從jQuery 1.7開始，on()函數(shù)提供了綁定事件處理程序所需的所有功能，用于統(tǒng)一取代以前的bind()、 delegate()、 live()等事件函數(shù)。$().bind()直接綁定在元素上，和click，blur，mouseon一樣的點擊事件。$().live()是通過冒泡的方式來綁定到元素上的。更適合列表類型的，綁定到document DOM節(jié)點上。$().delegate()是更精確的小范圍的使用事件代理。$().on()結(jié)合了這三個方法的優(yōu)勢摒棄了劣勢。

3、該函數(shù)可以為同一元素、同一事件類型綁定多個事件處理函數(shù)。觸發(fā)事件時，jQuery會按照綁定的先后順序依次執(zhí)行綁定的事件處理函數(shù)。

4、阻止事件冒泡和事件委托的方法：return false。在事件的處理中，可以阻止默認事件和冒泡事件。

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

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

到此這篇關(guān)于jquery的.click()點擊事件為什么無效，on('click',function())如何使用？的文章就介紹到這了,更多相關(guān)click()點擊無效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論