การใช้งาน function live ของ jQuery

เขียนโดย เมื่อ

วันนี้ติดปัญหากับการจัดการ click event ด้วย jquery ซึ่งปกติแล้วก็จะใช้ฟังก์ชัน click() เลย แต่วันนี้ดันใช้ไม่ได้ซะงั้น หลังจากที่ตรวจสอบดูก็พบว่า ถ้าเราเอาเนื้อหา (html) จากการโหลดด้วย ajax มาแสดง เหมือนว่ามันจะไม่ตอบสนองกับ jquery script ที่เราเขีียนไว้ที่หน้าหลัก

หน้าหลัก

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(function(){
$.get('example.php',function(res){
 $('#ajax-content').html(res);
});
$('#click-remove').click(function(){
  var removeMe = $('#remove-me');
  if(removeMe.length){
    removeMe.remove();
  }
});
});
</script>
<div id="ajax-content"></div>
<div id="remove-me">Remove me!!</div>

เนื้อหาของ example.php

1
<div id="click-remove">Remove tag id remove-me</div>

ถ้าเขียน script ประมาณนี้อาจจะมีปัญหาว่าเมื่อกดที่

1
Remove tag id remove-me

แล้วมันจะไม่ลบแท็ก Remove me!! ที่หน้าหลัก วิธีแก้ก็คือใช้ฟังก์ชัน live แทนฟังก์ชัน click

แก้ script ที่หน้าหลัก

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
...
$('#click-remove').live('click',function(){
  var removeMe = $('#remove-me');
  if(removeMe.length){
    removeMe.remove();
  }
});
...
</script>
...