Rumah hujung hadapan web tutorial js jQuery的live()方法对hover事件的处理示例_jquery

jQuery的live()方法对hover事件的处理示例_jquery

May 16, 2016 pm 04:57 PM
hover

hover([over,]out)

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。

当鼠标移出这个元素时,会触发指定的第二个函数。

复制代码 代码如下:

$('.myDiv').hover(function() {
doSomething...
}, function() {
doSomething...
});

而问题是有些元素比如菜单是通过AJAX动态加载的,hover方法执行的时候

菜单还没加载出来呢,所以就要用到jquery的另一个方法live()

.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:

绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。

传递给 .live() 的事件处理函数不会绑定在元素上,

而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。
复制代码 代码如下:

$('.myDiv').live('hover',function(event){
if(event.type=='mouseenter'){
doSomething...
}else{
doSomething...
}
})

有的jquery版本响应的是mouseenter和mouseleave
有的是mouseover和mouseout
待考证......
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Petua CSS: Gunakan peralihan untuk mengekalkan keadaan tuding Petua CSS: Gunakan peralihan untuk mengekalkan keadaan tuding Sep 27, 2022 pm 02:01 PM

Petua CSS: Gunakan peralihan untuk mengekalkan keadaan tuding

Bagaimana untuk mengalih keluar acara hover dalam css Bagaimana untuk mengalih keluar acara hover dalam css Feb 01, 2023 am 10:06 AM

Bagaimana untuk mengalih keluar acara hover dalam css

Pengalaman terbang dengan kamera Haval X1 Pengalaman terbang dengan kamera Haval X1 Jan 15, 2024 pm 02:21 PM

Pengalaman terbang dengan kamera Haval X1

Cara menggunakan hover dalam css Cara menggunakan hover dalam css Feb 23, 2024 pm 12:06 PM

Cara menggunakan hover dalam css

Mengapa hover ialah unsur pseudo Mengapa hover ialah unsur pseudo Oct 09, 2023 pm 05:45 PM

Mengapa hover ialah unsur pseudo

Peranan hover dalam html Peranan hover dalam html Feb 20, 2024 am 08:58 AM

Peranan hover dalam html

Cara menggunakan hover dalam css Cara menggunakan hover dalam css Nov 24, 2023 am 10:32 AM

Cara menggunakan hover dalam css

Bagaimana untuk menggunakan kaedah jQuery hover(). Bagaimana untuk menggunakan kaedah jQuery hover(). Dec 04, 2023 am 09:56 AM

Bagaimana untuk menggunakan kaedah jQuery hover().

See all articles