Dinamik DOM dan Konsep Event/Bind dengan jQuery

Dinamik DOM dan Konsep Event/Bind dengan jQuery

Sebelum ini, saya tidak begitu memahami konsep binding yang ada pada framework jQuery. Pemahaman saya yang dangkal menyebabkan saya hanya menulis potongan kode dengan konsep “yang penting jalan”. Jadi ketika saya menghadapi masalah yang berkaitan erat dengan konsep event/bind, saya sama sekali tidak tau apa yang menyebabkan kode yang saya tulis tidak jalan di browser.

Beberapa hari ini, saya membuat sebuah web dengan jQuery yang nantinya aplikasi dengan jQuery ini akan menghasilkan web interaktif dengan konten dinamik. Konten dinamik pada web adalah konten yang meminimalisir pergantian halaman dan lebih mengandalkan fungsi javascript untuk memanipulasi langsung DOM (Document Object Model) pada sebuah halaman web. DOM adalah pemodelan elemen-elemen pada web berupa objek yang membentuk web itu sendiri.

Puncak kebodohan saya adalah hari ini ketika saya hendak membuat konten dinamik, saya menemukan satu masalah: ketika saya mengeklik sebuah button, saya berhasil menambahkan sebuah elemen pada web, namun ketika saya mengeklik tomboh lain, saya tidak bisa menghapus elemen yang baru saya tambah barusan, namun anehnya, saya bisa menghapus elemen lain yang sudah diload sejak awal halaman dibuka (bukan hasil penambahan pada DOM lewat jQuery). Apa yang salah ya? 🙂

Sebelumnya, saya hanya tau konsep event/trigger yang ada pada jQuery, ketika suatu elemen diklik, dihover, mendapat event fokus, atau diubah ukurannya, maka kita bisa menjalankan fungsi tertentu sesuai dengan keinginan kita. Konsep ini disebut dengan konsep event/bind. Event adalah aksi yang menjadi pemicu (trigger) untuk menjalankan suatu fungsi. Contoh event ini adalah klik, hover (mengarahkan) mouse pada sebuah link, menekan tombol panah bawah, dan lain sebagainya. Ketika sebuah halaman di-reload untuk pertama kalinya, jQuery mengikat elemen-elemen yang akan dipakai sebagai elemen event. Konsep ini dikenal dengan bind.

Contohnya adalah:

1
2
3
4
5
$(document).ready(function(){
	$('a').bind('click', function(){
		//fungsi di sini ketika sebuah link diklik
	});
});

Namun sayangnya, konsep bind ini hanya bisa dipakai pada batasan tertentu. Karena jQuery hanya mengikat DOM yang direload pertama kali, bind pada jQuery tidak akan mengikat DOM yang dibentuk setelah halaman ditampikan. Contohnya:

1
2
3
4
5
6
7
8
$(document).ready(function(){
	$('a.add').bind('click', function(){
		$(body).append("<p>Hello world</p>"); // menambahkan paragraf di akhir body
	});
	$('a.remove').bind('click', function(){
		$('p:last').remove();  // this will not work :D
	});
});

Dari potongan kode di atas, fungsi remove tidak akan berfungsi dan menghapus paragraf terakhir. Mengapa? Karena bind tidak mengikat konten yang ditambahkan belakangan. Oleh karena itulah jQuery menyediakan sebuah fungsi untuk memantau semua elemen DOM baik itu yang pertama kali direload ataupun konten pada masa mendatang ketika sebuah elemen ditambahkan dengan jQuery.

Fungsi yang dimaksud adalah fungsi live() namun fungsi ini sudah tidak dipakai lagi (deprecated) karena lebih lambat dan memiliki beberapa kekurangan. Sebagai gantinya, jQuery menyediakan fungsi on() untuk memantau event secara terus menerus pada DOM yang saat ini digunakan. Contoh penggunakan live() dan on() diberikan pada potongan kode berikut.

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
	/* Contoh dengan menggunakan fungsi live() */
	$("a.remove").live('click',function(){
		$('p:last').remove();
	});
	/* Contoh dengan menggunakan fungsi on() */
	$(document).on('click', "a.remove", function(){
		$('p:last').remove();
	});
});

Semoga berguna 😉

4 thoughts on “Dinamik DOM dan Konsep Event/Bind dengan jQuery

  1. saya punya file javascript yang menangani parsing data form yang ada dalam modal, tp saat tombol pada modal form dklik file javascriptnya tidak dapat membaca data yang disubmit, apa mungkin karena saya masih menggunakan fungsi live().?
    mohon pencerahannya. trimakasih.

    1. Bisa banyak kemungkinannya:
      1. Bisa jadi karena fungsi live() yang deprecated
      2. Bisa juga karena ada fungsi javascript lain yang error sehingga seluruh javascript menjadi tidak bisa berjalan
      3. Bisa karena fungsi get value pada javascript tidak dapat membaca form sehingga tidak dapat mengirimkan data ke server
      Cara paling mudah adalah dengan cara mengamati apakah ada error lewat inspect element pada chrome atau firefox (saya lebih suka yang versi chrome).

Leave a Reply

Your email address will not be published. Required fields are marked *