การ bind event ให้กับ element ที่ยังไม่เกิด

การทำงานกับ Ajax เราจำเป็นต้องมีการ bind event ให้กับ element ที่ยังไม่เกิด ยกตัวอย่างเช่นถ้าเราต้องการ bind event ให้กับปุ่ม delete ที่อยู่ในแต่ละแถวของตารางที่ทำการ Ajax Call ไปดึงข้อมูลมาจากฝั่ง Server(ในตอน document ready จะยังไม่มีข้อมูลซักแถว) ก็ในเมื่อการ bind event onclick จำเป็นต้องทำการเขียน selector เพื่อให้ได่้ element นั้นมาก่อนแล้วค่อยใช้ .on หรือ .click bind event ให้กับ element นั้นๆ

วิธีการแก้ปัญหาอย่างแรกก็คือ ย้ายการ bind event ให้ไปทำงานตอน call back function ซึ่งจะทำงานได้เหมือนกันแต่จะทำให้ code ดูยุ่งยากและซับซ้อน ในบทความนี้เราเลยหยิบเอาประเด็นเรื่องนี้มาแก้ปัญหากัน โดยใช้วิธี bind event ให้กับ element ก่อนที่ element นั้นจะเกิดขึ่นจริงๆ

เริ่มจากเราจะสมมุติว่าให้ append element เข้าไปหลังจากผ่านไป 5 วินาที(เหมือนกับเราทำ Ajax call ไปยัง Server) โดยใช้ Code ด้านล่างนี้

และ target ที่เราจะ append element เข้าไปสมมุติให้เป็น div ที่ตั้ง id เป็น target แบบนี้

ขั้นตอนแรกเราจะทำการ select element ที่เป็น parent ของ target ที่เราต้องการ เช่นจากตัวอย่างเราก็ทำการ query เอา div ที่เป็น target(แทนที่จะ query เอาปุ่มที่อยู่ใน div นั้นมา bind event)

หลังจาก query target มาได้แล้วก็ให้ใช้ .on เหมือนปกติแต่เพิ่ม parameter ตัวที่ 2 ขึ้นมา ซึ่ง parameter ตัวนี้จะเป็น selector ไป query element ลูกอีกทีนึง(ซึ่งก็คือ element ที่ยังไม่เกิดนั่นเอง) จากในตัวอย่างเราจะทำการ query button ทุกตัวที่อยู่ใน div(ซึ่ง button จะยังไม่ในตอนเริ่มต้น แต่จะค่อยๆเพิ่มขึ้นทุกๆ 5 วินาที) แล้ว bind event onclick นี้ให้กับทุกๆ button ทั้งที่เกิดขึ้นมาแล้วและกำลังจะเกิดขึ่นในอนาคต