การทริกเกอร์อีเวนต์ด้วยเมธอด jQuery click()

ทำไม jQuery click() จึงสำคัญ

การคลิกเมาส์เป็นการกระทำพื้นฐานที่สุดบนเว็บไซต์ ไม่ว่าจะเป็นการนำทางหรือเพิ่มสินค้าลงตะกร้า การตรวจจับการคลิกบนองค์ประกอบเฉพาะช่วยให้นักพัฒนาสร้างประสบการณ์ผู้ใช้ที่ตอบสนองได้ดีขึ้น

วิธีใช้ jQuery click()

เมธอด click() ผูกตัวจัดการเหตุการณ์กับองค์ประกอบที่เลือก และรับฟังก์ชัน callback เป็นอาร์กิวเมนต์ ฟังก์ชันนี้จะทำงานทุกครั้งที่เกิดเหตุการณ์คลิก

ตัวอย่าง: แสดงข้อความเมื่อคลิกปุ่ม

โค้ด HTML พื้นฐาน:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
  <button id="btn-primary"> Click Me! </button>
  <p class="new-content"></p>
</div>

โค้ด jQuery ภายในแท็ก <script>:

<script>
  $('#btn-primary').click(() => {
    $('.new-content').html("Button Clicked!")
  })
</script>

เมื่อคลิกปุ่ม ฟังก์ชัน callback จะแทรกข้อความ "Button Clicked!" ลงในแท็ก <p> ที่มีคลาส new-content

ฟังก์ชันนิรนาม (Anonymous Functions)

ฟังก์ชันนิรนามคือฟังก์ชันที่ไม่มีชื่อ ใช้ทั่วไปในการส่งเป็น callback ให้เมธอดต่างๆ ซึ่งเป็นพื้นฐานสำคัญในการสร้างเว็บไซต์ที่ตอบสนอง (Responsive)

การใช้ .html() เทียบกับ .append()

เมธอด html() จะแทนที่เนื้อหาเดิมทั้งหมด ในขณะที่ append() จะเพิ่มเนื้อหาใหม่ต่อท้ายทุกครั้งที่คลิก

<script>
  $('#btn-primary').click(() => {
    $('.new-content').append("Button Clicked! ")
  })
</script>

หากคลิกปุ่ม 3 ครั้ง ข้อความจะปรากฏ 3 ครั้งติดต่อกัน

สรุป

เมธอด click() ของ jQuery เป็นเครื่องมือทรงพลังสำหรับสร้างฟังก์ชันการทำงานบนเว็บเพจด้วยโค้ดเพียงไม่กี่บรรทัด ลองนำไปใช้กับองค์ประกอบอื่นๆ นอกจากปุ่ม เพื่อดูผลลัพธ์ที่หลากหลาย