วันนี้ติดปัญหากับการจัดการ click event ด้วย jquery ซึ่งปกติแล้วก็จะใช้ฟังก์ชัน click() เลย แต่วันนี้ดันใช้ไม่ได้ซะงั้น หลังจากที่ตรวจสอบดูก็พบว่า ถ้าเราเอาเนื้อหา (html) จากการโหลดด้วย ajax มาแสดง เหมือนว่ามันจะไม่ตอบสนองกับ jquery script ที่เราเขีียนไว้ที่หน้าหลัก
หน้าหลัก
<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
<div id="click-remove">Remove tag id remove-me</div>
ถ้าเขียน script ประมาณนี้อาจจะมีปัญหาว่าเมื่อกดที่
Remove tag id remove-me
แล้วมันจะไม่ลบแท็ก Remove me!! ที่หน้าหลัก วิธีแก้ก็คือใช้ฟังก์ชัน live แทนฟังก์ชัน click
แก้ script ที่หน้าหลัก
<script type="text/javascript">
...
$('#click-remove').live('click',function(){
var removeMe = $('#remove-me');
if(removeMe.length){
removeMe.remove();
}
});
...
</script>
...