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

.click()無效的原因

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

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

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

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

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

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

點(diǎn)擊無效，因?yàn)橥ㄟ^on或click綁定的事件只對(duì)當(dāng)前存在的元素有效， 即on前面的元素必須在頁面加載的時(shí)候就已經(jīng)存在dom里,所以后添加的類名為.test的按鈕無效。

修改成下面示例

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

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

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

 $().on()的知識(shí)點(diǎn)補(bǔ)充：

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

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

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

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

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

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

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

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

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

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

最新評(píng)論