이벤트의 시운전 및 거품 방지에 대해 이야기하십시오.
HTML :
<ul data-type = "citypick"> <li data-id = "0"> all </li> <li data-id = "88"> New York </li> <li data-id = "119"> 로스 앤젤레스 </li> <li data-id = "138"> las Vegas </li> <li data-id = "84"> <li data-id = "120"> Francisco </li> <li data-id = "105"> Orlando </li> <li data-id = "118"> 시애틀 </li> </ul>
JS :
$ ( "ul [data-type = 'citypick']"). on ( 'click', function () {alert ( "부모 요소 UL이 클릭되었습니다");}); $ ( "ul [data-type = 'citypick']"). on ( 'click', 'li', function () {alert ( "child element li가 클릭되었습니다");});특정 LI 요소를 클릭 할 때 UL의 이벤트가 트리거되는 것으로 밝혀졌습니다. 이것은 우리가보고 싶지 않은 것입니다.
해결하다:
$ ( "ul [data-type = 'citypick']"). on ( 'click', function () {alert ( "부모 요소 UL이 클릭되었습니다");}); $ ( "ul [data-type = 'cityPick']" "). on ( 'click', 'li', function (e) {e.StopPropAgation (); // 버블 알림 중지 ("child element li가 클릭되었습니다 ");});거품을 멈추기 위해 문장을 추가하십시오.