jquery binding 레이블을 두 번 클릭하면 클릭

Question

레이블에 하나의 select를 추가하고 click 이벤트에 바인딩하면 jquery가 두 번 실행됩니다.

http://jsfiddle.net/d8Ax7/

HTML :

<label class="lol"> 
    <div> 
     bla 
    </div> 
    <div style="display:none;"> 
     <select></select> 
    </div> 
</label> 

자바 스크립트 :

$("label.lol").on({ 
    click : function() 
    { 
     alert(1); 
    } 
}) 

가 어떻게 라벨 속성 "에 대한"추가하지 않고이 버그를 해결할 수 있습니까?

Answer 1

나는이 질문에 이미 많은 답변을 알고 있지만 막연합니다.

$("label.lol").on({ 
    click : function() 
    { 
     alert(1); 
     return false; 
    } 
}); 

모두에게 감사드립니다. 문제 해결됨. 그러나 질문이 생기는 이유는 return false;입니다.

대답 간단한 단어 : 이것은 컴퓨터에서 사용자가 수행 한 작업에서 돌아 오면 작업이 완료되었음을 알리는 한 방법입니다. 이제 더 이상 혼란스러워하지 마라.

Answer 2

$("label.lol").off("click").on(//... 

하지만 두 번 발사 않다면 그것은 확실히 .OFF는이 이벤트를 두 번 바인딩을 끝낼 방법을 이해하는 것입니다 문제에 대한 최적의 솔루션보다 해킹 사용하여 두 번 그렇게 바인딩 것을 의미 .. . &은 확실히 당신이 보여주는 코드는이 이중 속박을 설명하지 않습니다

편집 : 그것은 참으로 한 번만 트리거 않는 바이올린의 & ...

Answer 3

당신은 라벨의이 "를"그것을 연결 속성을 사용하여 시도 할 수 그것의 밖의 선택에. 이 방법은 너무 작동하지만 나는 완전히 당신이 ... 을하려고하는지있어 이해가 안 그리고 레이블 만의 레이블 텍스트를 포함해야 내 예를

<label for="test" class="lol"> 
    <div> 
     bla 
    </div> 
</label> 

<div style="display:none;"> 
    <select id="test"></select> 
</div> 

http://jsfiddle.net/d8Ax7/1/

Answer 4

를 참조하십시오

$("label.lol div:first").on({ 
     click : function() 
     { 
      alert(1); 
     } 
    }) 

Answer 5

두 가지 옵션이 무시 있습니다 .. 선택과 자신을 선택 포함하지 클릭 ... 더 상세이 stack overflow 질문을 확인하지만,가 이것을 시도 합계

$("label.lol").click(function() { 
     alert(1); 
     return false; 
}); 

Answer 6

귀하의 마크 업은 끔찍합니다 .. 귀하의 문제는 jquery가 라벨 기능 내에서 각 div에 대해 click 이벤트를하고 있다는 것입니다. 즉 두 번을 의미합니다. 당신은 UR 마크 업을 깨끗이해야하고 div에 직접 클릭 할 수 있도록하고 싶습니다. 그렇지 사용 : 먼저 확인하는 이벤트 한 번 해고 전용 :

$('.lol div:first').click(function() 
{ 
    alert("1"); 
}) 

Answer 7

당신은 e.preventDefault()를 추가해야합니다;

$("label.lol").on({ 
    click : function (e) 
    { 
    alert(1); 
    e.preventDefault(); 
    } 
}); 

Answer 8

귀하의 문제는 요소들 사이의 구별에 달려 있습니다 .e.g 당신은 :first-child 선택과 라벨의 첫 번째 자식을 선택하거나에게 id 제공해야합니다 :

HTML :

<label class="lol"> 
    <div id="first-child"> 
     bla 
    </div> 
    <div style="display:none;"> 
     <select></select> 
    </div> 
</label> 

JS :

$("#first-child").on('click',function(){ 
     alert(1); 
}); 

http://jsfiddle.net/d8Ax7/5/

Answer 9

을 CSS로 필터링 해 봅니다 : int 추가 두 번째 경고 (또는 다른 동작)를 방지하고 .clicked을 제거하여 다음 라운드를 준비 할 수있는 clicked 클래스.

$("label.lol").on({ 
    click : function() 
    { 
     if (! $(this).hasClass('clicked')) 
      alert(1); 
     $(this).toggleClass('clicked'); 
    } 
})