클래스 이름별로 클릭 이벤트를 추가하는 방법은 무엇입니까?

Question

예제 HTML 메뉴가 있습니다.

<div class="mmenu"> 
    <ul> 
     <li> 
      <div class="menu_button" id="m1" >A</div> 
     </li> 
     <li> 
      <div class="menu_button" id="m2" >B</div> 
     </li> 
     <li> 
      <div class="menu_button" id="m3" >C</div> 
    </ul> 
</div> 

클래스 이름별로 메뉴의 각 요소에 click 이벤트를 추가 할 수 있습니까?

 $('.menu_button').click(function() { 
    if (id == "m1") .... 
}) 

Answer 1

런타임시 추가 된 요소도 클릭 할 수 있기 때문에 .click 대신 live 함수를 사용하는 것이 좋습니다.

$('.menu_button').live('click', function() { 
    var id = $(this).attr('id'); 
    if (id == "m1") { 
     //do your stuff here 
    } 
}); 

Answer 2

당신은 this.id

$('.menu_button').click(function() { 
    if (this.id == "m1") .... 
}) 

와 ID를 찾을 수 있습니다하지만 코드가 각 버튼에 대한 완전히 다른 경우, 그런 식으로 사용하는 것이 유용하지 않을 수 있습니다 대신에 따라 다른 처리기를 바인딩 신분증.

Answer 3

예. click 이벤트 처리기를 클래스 또는 다른 항목에 의해 선택되었는지 여부에 관계없이 DOM 요소 집합에 바인딩 할 수 있습니다. 예제의 구문이 정확하며 이벤트 핸들러는 선택기와 일치하는 각 요소에 바인딩됩니다.

그러나 예에서 id은 정의되지 않습니다. 클릭 한 요소가 this 일 때 this.id을 사용해야합니다.

Answer 4

내가 제대로 질문을 이해한다면,이를 사용해보십시오 :

$('.menu_button').click(function() { 
    if ($(this).attr('id') == "m1") .... 
}) 

을 Btw는 :이 경우, switch .. case 훨씬 더 적합 할 것입니다!

Answer 5

최적화 우리가 live() 이벤트

의 전파를 중지 할 수

사용 on() (jQuery를 1.7+) 또는 delegate() (1.7 이하)

을live()를 사용하지 하여 코드 대부분의 이 경우 시나리오에 대한 효율적인 솔루션은 다음과 같습니다.

이런 식으로

// $('.mmenu').on("click", ".menu_button", function() { // jQuery 1.7 & up 
    $('.mmenu').delegate(".menu_button", "click", function() { 
     var id = $(this).attr('id') // or this.id 
     if (id == "m1") { 
      // ..code 
     } 
    }); 

6,, 당신은 볼만한 더 좋은 방법은 $입니다 하나 개의 클릭 이벤트는 향후