jQuery hoverIntent untuk Injected Element

Apa itu jQuery hoverIntent ?, jQuery hoverIntent adalah sebuah plugin jQuery yang berguna untuk rekan-rekan sekalian jika ingin mengkustomasi event seperti hover, mouseenter, mouseleave atau mouse move yang disediakan jQuery. Sebagai contoh : dengan event jQuery hover standar, setelah element di hover, saat itu juga function callback akan di panggil, dengan jquery hoverIntent, rekan-rekan bisa men-delay hal tersebut, misal rekan-rekan ingin memanggil function callback, jika element sudah di hover selama 3 detik, jika kurang dari 3 detik, maka function callback tidak akan dipanggil. Plugin ini tentunya berguna untuk beberapa kasus seperti Hover Nama User di Facebook, yang delay beberapa miliseconds sebelum menampilkan pop up detail User, dll. Lebih detail mengenai penjelasan dan penggunaan jQuery hoverIntent silakan baca di situsnya.

Namun plugin jQuery hoverIntent, memiliki sebuah kekurangan yaitu, plugin ini tidak bisa diterapkan oleh Injected Element.
Contoh

$(document).ready(function(){

$(‘.element-class’).hoverIntent({

over : makeOver,

interval : 3000,

out : makeOut

});

$(‘.some-button’).click(function(){

$(‘body’).append(‘<a class=”element-class”>ini hover delay</a>’);

});

$(‘.some-button-other’).click(function(){

$(‘body’).append(‘<a class=”element-class”>ini hover delay juga</a>’);

});

});

Pada Contoh diatas, element yang baru rekan-rekan append ke body ketika user klik sebuah tombol, ketika di hover tidak akan terjadi apa-apa, walau sudah menunggu 3000 ms, intinya jQuery hoverIntent tidak berlaku pada element yang di append setelah halaman selesai di load. Untuk mengatasi hal ini, ada beberapa 2 solusi yang saya ajukan

1. Trigger jQuery hoverIntent setiap penambahan element

$(document).ready(function(){

$(‘.element-class’).hoverIntent({

over : makeOver,

interval : 3000,

out : makeOut

});

$(‘.some-button’).click(function(){

$(‘body’).append(‘<a class=”element-class”>ini hover delay</a>’);

$(‘.element-class’).hoverIntent({

over : makeOver,

interval : 3000,

out : makeOut

});

});

$(‘.some-button-other’).click(function(){

$(‘body’).append(‘<a class=”element-class”>ini hover delay juga</a>’);

$(‘.element-class’).hoverIntent({

over : makeOver,

interval : 3000,

out : makeOut

});

});

});

Tentunya hal ini tidak solutif, karena ketika aplikasi yang dibuat misal harus berkali-berkali menginjeksi element serupa dengan trigger yang berbeda beda, maka rekan-rekan harus menyalin kode trigger hoverIntent ketika element selesai di injeksi, dan sangat memungkinkan trigger lupa terpasang ketika injeksi element selesai.

2. Modifikasi jQuery hoverIntent

Solusi ini paling mudah dan paling relevan, modifikasi dilakukan dengan mengubah binding pada plugin jQuery hoverIntent yang awalnya bind dan unbind menjadi live dan unlive, tentunya beberapa perubahan minor pada passing parameter antar function dalam plugin. Namun sama sekali tidak mengubah kegunaan dari plugin ini sendiri. Penggunaannya cukup :

$(document).ready(function(){

$(‘.element-class’).hoverIntent({

over : makeOver,

interval : 3000,

out : makeOut

});

});

Cukup dengan kode itu saja, maka semua element terkait baik yang sudah ada sebelum halaman di load, ataupun element yang baru ada setelah di injeksi akan tetap terpengaruh oleh hoverIntent.

Script plugin yang di sudah modifikasi ada disini :