2012-12-27 10 views
2

이전에는 함수 내부에서 이벤트를 바인딩하면 안된다고 들었습니다. 이 현안을 해결하는 최선의 선택은 무엇입니까? 링크를 클릭하면 해당 링크에서 일부 속성을 가져오고 싶습니다. 내가 현재 어떻게하고 있는지 알려드립니다.클릭 이벤트 내에서의 이벤트 바인딩

$(".portfolioLink").click(function(){ 

      // Show slide and portfolio piece info 
      $(".inner-content.portfolio").show(); 

      // Reset slides timer and pagination 
      clearInterval($('#slides').data('interval')); 
      $("ul.pagination li").removeClass("current"); 

      // Get ID from link that is clicked. 
      var slideID = $(this).parent().attr("id"); 

      $("#previous").click(function() { 
       slideID--; 
       clearInterval($('#slides').data('interval')); 
       $("ul.pagination li").removeClass("current"); 
       portfolioSwitch(slideID); 
      }); 

      $("#next").click(function() { 
       slideID++; 
       clearInterval($('#slides').data('interval')); 
       $("ul.pagination li").removeClass("current"); 
       portfolioSwitch(slideID); 
      }); 
} 

나는 다음과 이전 버튼 인 앞뒤로 움직이는 두 개의 버튼이 있습니다. 클릭하는 링크에 따라 앞으로 또는 뒤로 가고 싶습니다. $(".portfolioLink") 클릭 이벤트 외부에서 이러한 클릭 이벤트를 발생시키는 동시에 포트폴리오 링크에서 해당 속성을 가져 오는 가장 좋은 방법은 무엇입니까?

+0

또한 html 코드를 게시 할 수 있습니까? – Chanckjh

답변

4

나는 그 함수가 다른 이벤트 핸들러 인 경우에만, 함수 내에서 이벤트 처리기를 바인딩 문제가되지 않습니다 함수

의 내부 이벤트를 바인딩 할 것을 이전에 들었다. 그 다른 이벤트 핸들러가 여러 번 (당신의 경우와 같이) 실행된다면, 당신은 일반적으로 원하지 않는 매번 새로운 이벤트 핸들러를 바인딩 (추가) 할 것입니다.


당신은 공유 변수 (공통 범위의 변수) ... slideID이 설정되지 않은 경우 #next 또는 #previous 클릭하는 경우, 아무것도하지 사용할 수 있습니다

var slideID; 

$(".portfolioLink").click(function(){ 
    // ... 

    // Get ID from link that is clicked. 
    slideID = $(this).parent().attr("id"); 
}); 

$("#previous").click(function() { 
    if(typeof slideID !== 'undefined') { 
     // ... 
    } 
}); 

$("#next").click(function() { 
    if(typeof slideID !== 'undefined') { 
     // ... 
    } 
}); 

또는 slideID을 기본 슬라이드 번호로 초기화합니다.

6

클릭 이벤트를 다른 클릭 이벤트에 바인딩하면 .portfolioLink이 클릭 될 때마다 새 클릭 기능이 # previous/# next 버튼에 바인딩되므로 .portfolioLink을 두 번 클릭하면 클릭 수가 두 번 증가하고 클릭하면 세 번 증가합니다. 3 번 등등. 다음과 같이 범위를 높이기 위해 변수를 사용하여 문제를 해결할 수 있습니다.

var slideID = 0; 

$(".portfolioLink").click(function() { 
    $(".inner-content.portfolio").show(); 

    clearInterval($('#slides').data('interval')); 
    $("ul.pagination li").removeClass("current"); 

    slideID = $(this).parent().attr("id"); 
} 

$("#previous, #next").click(function() { 
    slideID = this.id=='next' ? slideID+1 : slideID-1; 
    clearInterval($('#slides').data('interval')); 
    $("ul.pagination li").removeClass("current"); 
    portfolioSwitch(slideID); 
}); 
​ 
+0

두 단추 모두에 대해 +1 이벤트 처리기를 공유하면 의미가 있습니다. –

+0

@FelixKling - 감사합니다. 둘 다 똑같은 아이디어이기 때문에 여러분의 의견을 높이 샀습니다. – adeneo

+0

아주 좋은 답변들! – wowzuzz