เพียงแค่พูดคุยเกี่ยวกับการว่าจ้างเหตุการณ์และป้องกันฟองสบู่
html:
<ul data-type = "citypick"> <li data-id = "0"> ทั้งหมด </li> <li data-id = "88"> นิวยอร์ก </li> <li data-id = "119"> ลอสแองเจลิส </li> Francisco </li> <li data-id = "105"> ออร์แลนโด </li> <li data-id = "118"> seattle </li></ul>
JS:
$ ("ul [data-type = 'citypick']"). on ('คลิก', function () {alert ("องค์ประกอบหลัก UL ถูกคลิก");}); $ ("ul [data-type = 'citypick']") on ('คลิก', 'li', function () {alert ("องค์ประกอบลูก li ถูกคลิก");});เมื่อคลิกที่องค์ประกอบ LI ที่เฉพาะเจาะจงเหตุการณ์ของ UL จะถูกเรียกใช้ซึ่งเป็นสิ่งที่เราไม่ต้องการเห็น
แก้ปัญหา:
$ ("ul [data-type = 'citypick']"). on ('คลิก', function () {alert ("องค์ประกอบหลัก UL ถูกคลิก");}); $ ("ul [data-type = 'citypick']"). on ('คลิก', 'li', ฟังก์ชั่น (e) {e.stoppropagation (); // หยุดการแจ้งเตือนฟองสบู่ ("องค์ประกอบลูก Li ถูกคลิก");});เพียงเพิ่มประโยคเพื่อหยุดฟอง