Solusi Elemen Dinamis Gagal Memanggil Fungsi jQuery

Hari ini saya ingin membahas pembuatan elemen HTML secara dinamis (DHTML). Saat ini banyak aplikasi yang membutuhkan suatu elemen tambahan yang baru dibuat ketika pengguna melakukan interaksi saja.

Pada contoh sehari-hari DHTML sering digunakan pada website ataupun aplikasi yang menggunakan AJAX dan JSON. Walaupun pada dasarnya kita sudah sering menemui contohnya, tapi mungkin anda belum menyadari bahwa ada sesuatu yang ganjil telah terjadi.

Pada contoh ini penulisan kode Javascript yang ditulis seperti biasa dengan library jQuery.

Saya menambahkan sebuah fungsi akan membuat elemen baru yang dijalankan saat link diklik. Misalkan saya memiliki beberapa kode jQuery yang melampirkan event handler ke semua elemen dengan nama kelas ".kelasku".

Sebagai contoh:

<html>
<body>
HTML saya mungkin sebagai berikut:

<a class="kelasku" href="#">test1</a>
<a class="kelasku" href="#">test2</a>
<a class="kelasku" href="#">test3</a>
<script src="jquery.js"></script>
<script>
$(function(){
    $(".kelasku").click( function() {        
	alert("lakukan sesuatu")
    });
});
</script>
</body>
</html>

Kode diatas dapat bekerja tanpa masalah. Bahkan apabila kita menambahkan elemen link elemen .kelasku ke halaman secara dinamis.

Sebagai contoh:

<button id="tambah" href="#">buat tautan secara dinamis</button>

$("#tambah").click( function() {

jumlah = $(".kelasku").length +1;

$("#lokasi").append('<a class="kelasku" href="#">test'+jumlah+'</a>');

});

</skript>

Setelah menyertakan tambahan kode diatas anda dapat menambahkan elemen secara dinamis. Dalam kasus ini, link test4, test5 dan seterusnya dapat dibuat dengan dinamis ketika pengguna mengklik tombol. Tapi coba perhatikan..!

Masalah Elemen Dinamis Gagal Memanggil Fungsi

Masalah muncul pada tautan test4 dan selanjutnya tidak memiliki handler click() yang terkait dengannya, meskipun memiliki class="kelasku". Kerena elemen yang dibuat dari skript dinamis tidak dapat memiliki handler fungsi javascript tersebut, maka ketika diklik tidak akan terjadi apa-apa.

Pada dasarnya, inti masalah adalah ketika kita ingin menulis fungsi yang menggunakan click() dan menerapkannya pada semua yang ada saat pemuatan halaman atau mulai dari elemen yang statis, dan konten yang dibawa kemudian melalui AJAX/DHTML.

Solusinya Adalah:

Pada skript yang menggunakan jQuery 1.7+ Anda dapat melampirkan event handler ke elemen induk menggunakan .on(), dan melanjutkan dengan elemen pilihan yang dikombinasikan dengan 'kelasku' sebagai argumen.

Anda dapat membaca dokumentasi http://api.jquery.com/on/

Jadi hapus atau matikan kode yang menggunakan ...

$(".kelasku").klik( function() {

// lakukan sesuatu

});

Kemudian tulis menjadi...

$('body').on('click', 'a.kelasku', function() {

// lakukan sesuatu

});

Dengan cara demikian maka semua handler fungsi akan dapat diberikan pada elemen didalam body, begitu pula termasuk elemen baru yang ditambahkan dengan cara dinamis. Elemen dinamis tersebut dapat menjalankankan fungsi yang ditelah disiapkan

Tag body digunakan di sini karena contoh diatas tidak memiliki tag sekitar statis yang lebih dekat, tetapi tag induk apa pun yang ada saat pemanggilan metode .on terjadi akan berfungsi. Misalnya tag ul untuk daftar link yang akan menambahkan elemen dinamis akan terlihat seperti ini:

$('ul').on('click', 'li', function() {

alert( $(".isian").text() );

});

Selama tag ul ada, fungsi ini akan berfungsi (meski belum ada elemen li yang perlu ada). Sehingga skript akhirnya sebagai berikut:

<html>
<body>
HTML saya mungkin sebagai berikut:

<a class="kelasku" href="#">test1</a>
<a class="kelasku" href="#">test2</a>
<a class="kelasku" href="#">test3</a>
<div id="lokasi"></div>
<button id="tambah" href="#">buat tautan secara dinamis</button>
<ul id="lokasi1"></ul>
<button id="tambah1" href="#">buat list tautan secara dinamis</button>
<script src="jquery.js"></script>
<script>
$(function(){
    //$(".kelasku").click( function() {        
    $('body').on('click', 'a.kelasku', function() {
		alert("lakukan sesuatu")
    });
	$("#tambah").click( function() {
		jumlah = $(".kelasku").length +1;
        $("#lokasi").append('<a class="kelasku" href="#">test'+jumlah+'</a>');
    });
	$('ul').on('click', 'li', function() {
     alert( $("#tambah1").text() );
	});
	$("#tambah1").click( function() {
		jumlah = $(".kelaslist").length +1;
        $("#lokasi1").append('<li class="kelaslist" href="#">test'+jumlah+'</li>');
    });
});
</script>
</body>
</html>