เรียกฟังก์ชั่น click ใน jQuery หลังโหลด AJAX มาแล้วไม่ทำงาน

โดย SONGCHAI SAETERN


ลืมตลอด JavaScript พวก onclick onchange ต่างๆ 
ถ้าสร้างไว้ก่อนจะไม่มีผลกับ element ที่โหลดมาด้วย AJAX

ถ้าจะให้มันทำงานต้องดักด้วยการเพิ่ม .on()

$(document).on('click', '#target_button', function(){
      //Your code here
});


เช่นเดิมทีหน้าหลักมีแค่

<div id="main_content">
 <!-- AJAX Content
</div>

แล้วเมื่อโหลดข้อมูล Ajax เรียบร้อย

<div id="main_content">
  <button id="target_button">TEST</button>
</div>

 <script>
 $("#target_button").click(function(){
     alert("555+ เงี๊ยบปิ๊ง!!");
});
</script> 


ในส่วน Script ต้องใช้ .on เข้าช่วย


<script>
$(document).on('click', '#target_button', function(){
      alert('เย้ๆๆๆ ทำงานแล้ว');
});
</script>


ก็เอวัง ด้วยประการฉะนี้แล