여러 번의 클릭 이벤트를 처리하는 가장 좋은 방법

Question

내 응용 프로그램에서 링크를 클릭하면 몇 가지 작업을 완료하려고합니다.

예를 들어, 문서 내에 여러 개의 내부 링크가있는 설명서를 만듭니다. 현재, 그래서처럼 처리 될 것이다 :

function waitForClick() 
{ 
    $('#about').click(function() 
    { 
     $('#container').slideDown(); 
    }); 

    $('#using').click(function() 
    { 
      changeContent... 
    }); 

    <!-- etc, etc -->    

} 

내가 모든 단일 항목에 대한 이벤트를 필요로하지 않도록, 다수의 클릭 이벤트를 처리 할 수있는 더 나은 방법이 있나요. 클릭 한 항목을 위임 할 수있는 방법이 있어야합니다.

HTML은 :

<li><a id="about" href="#">About this Application</a></li> 
<li><a id="using" href="#">Using this Manual</a></li> 
<li><a id="pages" href="#">Pages:</a></li> 

<!-- etc, etc --> 

이 매뉴얼에 대한 내용의 테이블이 될 예정이다. 그래서 많은 지역 링크가있을 것입니다.

Answer 1

개인적으로 다음과 같이 사용합니다. 개별적으로 캐스팅되는 수많은 이벤트를 피하고 목적에 맞게 확장 할 수 있습니다. 당신이 할 일은 이벤트를 가져야하는 각 요소에 "clickEventClasss"의 클래스를 추가하는 것입니다.

function waitForClick() 
{ 

    $('.clickEventClass').click(function() { 

     var id = $(this).attr('id'); 

     switch(id) { 
      case 'about': 
      //Logic 
      break; 
     case 'using': 
      //Logic 
      break; 
     } 

    });   

} 

Answer 2

클릭 이벤트를 ID가 아닌 클래스에 바인딩 할 수 있습니다.

<a class="navigationLink" href="home.com">Home</a> 
<a class="navigationLink" href="about.com">About</a> 
<a class="navigationLink" href="contactus.com">Contact Us</a> 

$(".navigationLink").click(function() { 
    //Do something cool 
}); 

Answer 3

클릭 이벤트를 할당 할 클래스를 사용할 수 있습니다. 이 후

가능한 다음입니다 :

$(".class").click(function() 
{ 
    if($(this).attr("id") == "about") 
    { 
     //code here 
    } 
    else if($(this).attr("id") == "using") 
    { 
     //code here 
    } 
}