Pengenalan jQuery Api Live

Web tidak lepas dengan namanya event, di klik, di mouseover, mouseleave, onchange dan banyak lagi event pada web. Penanganan event pada web harus jadi point plus bagi seorang web developer. Pada artikel ini saya ingin share mengenai penanganan event dengan api jquery live(). Apa bedanya penanganan event dengan api bind() dengan api live(), akan saya jelaskan pada artikel ini.

Agar lebih jelas, mari kita coba penggunaan api bind() untuk penanganan event kode seperti dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
<head>
  <meta charset=utf-8>
  <title>Live Jquery API</title>
</head>
<body>
  <div id="box">
    <ul>
      <li>Element Text</li>
    </ul>
  </div>
 
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
  <script type='text/javascript' src='external.js'></script>
</body>
</html>

Lalu saya buat sebuah handle javascript external dengan nama file external.js

1
2
3
4
5
6
7
$('div ul li').bind('click',function(){
  console.log('li di click');
  var li_clone = $(this).clone();
  console.log(li_clone);
   
  $('div ul').append(li_clone);
});

Pada kode diatas saya buat event, apabila element text di klik, copy element tersebut lalu tambahkan pada UL element. Untuk meng-copy sebuah element teman-teman bisa menggunakan api clone() jquery.

Demo bisa liat disini : http://jsbin.com/enulob/3

Saat menjalankan kode diatas, klik element text lalu akan terlihat bahwa terjadi penambahan element LI pada UL, itulah fungsi dari api clone(). Terlihat berjalan dengan baik ya..

Suatu saat pasti teman ingin menghandle bagaimana cara nya agar element yang sudah kita clone tadi dapat menjalankan fungsi handle event yang sama dengan event yang pertama. Pada kode diatas, saat proses penambahan element LI pada UL, saya sebut (LI kedua dan LI seterusnya), saat kita klik, maka LI kedua dan seterusnya tidak dapat menjalankan proses seperti layaknya LI pertama yaitu menambahkan element LI ke dalam UL. Lalu bagaimana agar LI kedua dan berikutnya dapat menjalankan aksi seperti LI pertama ??

Dengan adanya jquery api live(), kita dapat menyelesaikan solusi permasalahan sederhana kode diatas, berikut saya coba tulis handle dengan jquery api live().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
<head>
  <meta charset=utf-8>
  <title>Live Jquery API</title>
</head>
<body>
  <div id="box">
    <ul>
      <li>Element Text</li>
    </ul>
  </div>
 
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
  <script type='text/javascript' src='external.js'></script>
</body>
</html>

Lalu external.js nya seperti kode dibawah ini.

1
2
3
4
5
6
7
$('div ul li').live('click',function(){
  console.log('li di click');
  var li_clone = $(this).clone();
  console.log(li_clone);
   
  $('div ul').append(li_clone);
});

Saat dicoba, maka akan sesuai yang kita inginkan, baik element LI kedua atau berikutnya dapat menjalankan aksi seperti pada element LI pertama.

Demo bisa dilihat disini : http://jsbin.com/exanik

Menarik kan ??
Semoga dapat menambah teknik skill teman-teman untuk handle event pada berbagai kasus web development.

  • Catatan Tambahan : api jQuery.live() untuk versi jquery 1.7+ sudah tergantikan dengan api jQuery.on()
  • Referensi Tulisan : http://api.jquery.com/live/

Leave a Reply

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

%d bloggers like this: