라벨의 클릭 이벤트에 JQuery와 바인딩 두 번 솔루션을 트리거

첫째, 우리는 다음 코드 (보고 라벨 포장의 CheckBox )

< DIV 클래스 = "예" > < 라벨 용 = "chk_6 「클래스 ="라벨 1 " >选项6 < 입력 클래스 ="chkbox-1 " 타입 ="체크 박스 " ID ="chk_6 " 값 ="1 " > </ 라벨 > </ DIV > 
< DIV 클래스 = "예" > < 라벨 용 = "chk_7 「클래스 ="라벨 1 " >选项7 < 입력 클래스 ="chkbox-1 " 유형 ="체크 박스 " ID ="chk_7 "값 = "1" > </ 라벨 > </ DIV > 
< DIV 클래스 = "예" > < 라벨 용 = "chk_8 「클래스 ="라벨 1 " >选项8 < 입력 클래스 ="chkbox-1 " 타입 = "체크 박스" ID = "chk_8" 값 = "1" > </ 라벨 > </ DIV > 
< DIV 클래스 = "예" > < 라벨 용 = "chk_9"클래스 = "라벨 1" >选项9 < 입력클래스 = "chkbox-1" 타입 = "체크 박스" ID = "chk_9" 값 = "1" > </ 라벨 > </ DIV > 
< DIV 클래스 = "예" > < 라벨 용 = "chk_10 「클래스 ="레이블 -1 " >选项10 < 입력 클래스 ="chkbox-1 " 타입 ="체크 박스 " ID ="chk_10 " 값 ="1 " > </ 라벨 > </ DIV >

// 바운드 라벨 클릭 이벤트 
    $ ( '. 1 레이블입니다.')을 클릭합니다. ( 기능 (E) { 
        을 console.log ($ ( 다음은이 )는 .text ()); 
    });

우리는 현상을 발견 할 것이다 콘솔을 관찰 한 다음 텍스트를 클릭! ! (코드는 두번 실행된다)

문제 원인 :

이벤트 한 번 버블 링 할 때 라벨을 클릭하고, 이벤트 다시 버블 링 선도하는 클릭 이벤트의 관련 입력을 트리거합니다

용액 A ( HTML 구조의 레이블과 체크 박스 같은 수준에서 수정 )

< DIV 클래스 = "예" > < 라벨 용 = "chk_1 「클래스 ="라벨 1 " >选项1 </ 라벨 > < 입력 클래스 ="chkbox-1 " 타입 ="체크 박스 " ID ="chk_1 " 값 = "1" > </ DIV > 
< DIV 클래스 = "예" > < 라벨 용 = "chk_2 「클래스 ="라벨 1 " >选项2 </ 라벨 > <입력 클래스 = "chkbox-1" 타입 = "체크 박스"ID = "chk_2" 값 = "1" > </ DIV > 
< DIV 클래스 = "예" > < 라벨 용 = "chk_3 「클래스 ="라벨 1 " >选项3 </ 라벨 > < 입력 클래스 ="chkbox -1 " 타입 ="체크 박스 " ID ="chk_3 " 값 ="1 " > </ DIV > 
< DIV 클래스 ="예 " > < 라벨 용 chk_4 =" "클래스 = "레이블 -. 1" > 옵션을 선택합니다. 4 </ 라벨> < 입력 클래스 = "chkbox-1" 타입 = "체크 박스" ID = "chk_4" 값 = "1" > </ DIV > 
< DIV 클래스 = "예" > < 라벨 용 = "chk_5 「클래스 ="라벨 - 1 " >选项5 </ 라벨 > < 입력 클래스 ="chkbox-1 " 타입 ="체크 박스 " ID ="chk_5 " 값 ="1 " > </ DIV >

화면을 새로 고침 텍스트를 클릭 한 다음 콘솔을 준수하십시오

정상 OK.

해결 방법 2 (JS 코드를 수정 체크 박스 변경 이벤트를 바인딩 ) :

    // 바인딩 체크 박스 변경 이벤트 
    $ ( '. 1 chkbox.') 변경 (. 기능 (E) { 
        을 console.log ($ ( 다음은이 ) .parent () 텍스트 ()); 
    });

화면을 새로 고침 텍스트를 클릭 한 다음 콘솔을 준수하십시오

정상 OK.

셋째 용액 (이 입력되고있는 경우, 정지, 이벤트의 소스를 결정하기 위해)

// 绑定라벨的클릭事件의 
    $ ( '라벨-1.'()을 클릭합니다. 기능 (전자) {
         경우 ($ (e.target가) ( "입력".is는 ))
             반환 ; 
        (을 console.log ($를 이 )는 .text ()); 
    });

해결 방법 4 :

레이블이없는 (가장 간단하고 직접적인 원유 방법)

라벨의 클릭 이벤트에 JQuery와 바인딩 두 번 솔루션을 트리거

추천