모범 사례 JQuery로 여러 요소에 클릭을 바인딩하는 방법

Question

Jquery UI 아이콘을 사용하여 스팬으로 표현되는 약 20 개의 다른 옵션 버튼을 포함 할 수있는 웹 응용 프로그램이 있습니다. 이 옵션 중 일부는 최대 200 번까지 사용할 수 있습니다. 이 옵션은 페이지에서 항목 추가, 편집, 삭제, 순서 재 지정과 같은 것입니다. 모든 것은 컨테이너 DIV에 포함됩니다.

기본적으로 고유 한 옵션 세트가있는 컨테이너 DIV가 있습니다. 그 안에는 여러 가지 섹션 DIV가 있으며 그 중에서도 고유 한 옵션 집합이 있습니다. 마지막으로 각 섹션에는 패널 DIV가 있으며 옵션도 있습니다 (섹션 당 100 개 이상의 패널이 될 수 있음). 응용 프로그램의 특성상 섹션과 패널은 사용 중에 컨테이너에서 추가 및 제거됩니다.

이러한 옵션 중 하나를 클릭하면 "활성"클래스를 추가하여 강조 표시하고 선택한 옵션에 따라 일부 코드를 수행하고 완료되면 활성 코드를 제거하려고합니다. 이것들 중 어느 것도 지금까지는 특별히 어렵지만 JQuery에서 이벤트 바인딩을 처리하는 가장 효율적이고 모범 사례를 찾고 있습니다.

는

예 HTML (예제의 목적을 위해,이 간소화되었으며, 일부 JQuery와 클래스는 잘못된 철자가있을 수 있습니다)

<div id='container'> 
    <span class='ui-icon ui-icon-plusthick optionButton addSection'></span> 
    <span class='ui-icon ui-icon-gear optionButton editContainer'></span> 

    <div>...Overall Container Contents Here...</div> 

    <div id='section_1' class='section'> 
     <span class='ui-icon ui-icon-gear optionButton editSection'></span> 
     <span class='ui-icon ui-icon-minusthick optionButton deleteSection'></span> 
     <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpSection'></span> 
     <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownSection'></span> 
     <span class='ui-icon ui-icon-plusthick optionButton addContent'></span> 

     <div>...Section 1 Contents Here...</div> 

     <div id='panel_1' class='panel'> 
      <span class='ui-icon ui-icon-gear optionButton editPanel'></span> 
      <span class='ui-icon ui-icon-minusthick optionButton deletePanel'></span> 
      <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpPanel'></span> 
      <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownPanel'></span> 

      <div>...Panel 1 Contents Here...</div> 
     </div> 

     <div id='panel_2' class='panel'> 
      <span class='ui-icon ui-icon-gear optionButton editPanel'></span> 
      <span class='ui-icon ui-icon-minusthick optionButton deletePanel'></span> 
      <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpPanel'></span> 
      <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownPanel'></span> 

      <div>...Panel 2 Contents Here...</div> 
     </div> 

     . 
     . 
     . 
     (could be 150 panels here) 
    </div> 

    <div id='section_2' class='section'> 
     <span class='ui-icon ui-icon-gear optionButton editSection'></span> 
     <span class='ui-icon ui-icon-minusthick optionButton deleteSection'></span> 
     <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpSection'></span> 
     <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownSection'></span> 
     <span class='ui-icon ui-icon-plusthick optionButton addContent'></span> 

     <div>...Section 2 Contents Here...</div> 

     <div id='panel_151' class='panel'> 
      <span class='ui-icon ui-icon-gear optionButton editPanel'></span> 
      <span class='ui-icon ui-icon-minusthick optionButton deletePanel'></span> 
      <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpPanel'></span> 
      <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownPanel'></span> 

      <div>...Panel 151 Contents Here...</div> 
     </div> 

     <div id='panel_152' class='panel'> 
      <span class='ui-icon ui-icon-gear optionButton editPanel'></span> 
      <span class='ui-icon ui-icon-minusthick optionButton deletePanel'></span> 
      <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpPanel'></span> 
      <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownPanel'></span> 

      <div>...Panel 152 Contents Here...</div> 
     </div> 

     . 
     . 
     . 
     (could be another 150 panels here) 
    </div> 

    . 
    . 
    . 
    (could be multiple sections here) 
</div> 

이, 넓은 레이아웃입니다 ... 내가 클릭을 바인드해야 optionButton 클래스를 사용하여 모든 이벤트를 처리 할 수 ​​있습니다. 현재 저는 이것을 사용하고 있습니다 ...

$('#container').on('click', '.optionButton:not(".ui-state-disabled")', function(e) { 
    var $tgt = $(this); 
    $tgt.addClass("ui-state-active") 

    if($tgt).hasClass('addSection') { 
     // code for addSection button 
    } 

    if($tgt).hasClass('editContainer') { 
     // code for editContainer button 
    } 

    ...and so on for all 20 buttons... 

    $tgt.removeClass("ui-state-active") 
}); 

이게 가장 좋은 방법인가요?

또는 각 단추 스타일에 클릭 바인딩을 사용하는 것이 좋을까요? (즉, "on()"함수에 대한 20 번의 호출)

단일 바인딩의 문제는 코드가 매우 복잡하고 매우 빠르게 따라하기 어렵지만 하나의 공통 바인딩 훌륭하게. 그냥 ($ tgt.hasClass 경우 ('thisClass' "의 목록으로 구성 그래서 내가 생각했습니다

다른 생각 ...

• 즉시 하나의 바인딩에서 함수 호출에 떨어져 분기)) {doThisFunction ($ tgt);}
• 예를 들어 "thisOption = 'editContent'"와 같이 각 옵션 버튼 범위 내에 맞춤 요소를 넣습니다. 그런 다음 "editContent"라는 함수를 사용하여 eval ($ tgt.prop ('thisOption') + '('+ $ tgt + ')'); 클릭 할 때 자동으로 스팬 컨트롤이 호출하는 기능을 갖습니다. 각 "thisOption"값에 a 관련 기능, 전반적인 바인딩은 쿠데타가 필요할 것입니다 파일의 함수의 코드 라인
  • 나는 JQuery의 커스텀 이벤트를 조사해 봤지만, .trigger()를 사용하여 전체적인 바인딩을 트리거했다. 그러나 이것이 20 클릭을하는 것과는 다르다고는 생각하지 않는다. (나는 이것에 대해 잘못된 방법을 생각하고있는 경우 또는 대체) 매우 환영받을 것이며 이러한 목표를 달성하는 가장 좋은 방법에

어떤 조언을 결합한다. 나는이 프로젝트를 점차적으로 구축하고 각 단계에서 최대한 효율적으로 할 수 있도록 돌보고있다. 제가 이것을 아주 잘 설명하지 못했다면, 사과 드리겠습니다.

Answer 1

각 클릭 이벤트에서 정확한 로직이 무엇인지를 확인하기 위해 전체 논리가 실행되기 때문에 20 .on() 대리자를 사용하는 것이 훨씬 더 좋습니다.그렇지 않으면 대상에 대한 특정 논리 만 실행됩니다. 본질적으로 on()의 대리자 기능 중 일부를 반복하여 비 특정 선택기에 위임 한 다음 자신의 기능 내에서 특정하게 만듭니다.

Answer 2

모든 요소에 대해 공통 논리가있는 경우 모든 요소에 공통 바인딩을 사용하십시오. 공통 논리가 없으면 다른 바인드를 사용하는 것이 좋습니다.