jQuery .on() 이벤트가 작동하지 않는 경우 : lt() selector

Question

모든 테이블 데이터에서 클릭 이벤트를 생성하려고합니다. <td>을 제외한 <TD>을 제외하고는 나머지는 아니고 첫 번째 행과 함께 작동합니다.

HTML :

<table class="table" style="width:100%;"> 
<tbody> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
</tbody> 
</table> 

JS 코드 :

$('.table tbody').on('click', 'tr td:lt(3)', function(){ 
    // Trying to check the click event 
    console.log('working'); 
}); 

JSFIDDLE

jsfiddle

나는 그 작업을 잘 다음 :lt(3) 선택을 제거하지만 난 그렇게하지 않으면 알다 왜 덜 선택기와 함께 작동하지 않는 이유는 무엇입니까?

Answer 1

음이이 TR (1)에 적용 할 :lt() selector의 작동 방식은 다음과 같습니다.

인덱스 관련 선택기 (이 "보다 작음"선택기 포함) 은 앞에 오는 표현식과 일치하는 요소 집합을 필터링합니다. 이 일치하는 집합 내에서 요소의 순서에 따라 설정 범위를 좁 힙니다. 예를 들어, 요소가 먼저 클래스 선택기 (.myclass)로 선택된 이고 반환되는 요소가 4 개 ( ) 인 경우 이러한 요소에는 의 경우 0 ~ 3의 인덱스가 지정됩니다.

경우에 따라 tr td이 16 개의 셀과 일치하며 그 다음 결과 집합의 처음 3 개 요소가 필터링됩니다. 이 같은 코드를 수정할 수 :

// trap clicks on .table tbody and filter all td elements 
// that are "-n+3"th child of their parent 
$('.table tbody').on('click', 'td:nth-child(-n+3)', function() { 
    console.log('working'); 
}); 

n 번째 자식 선택기 explained here입니다 :

// trap clicks on .table tbody and filter all td elements 
$('.table tbody').on('click', 'td', function() { 
    if ($(this).index() < 3) { 
     console.log('working'); 
    } 
}); 

또는 더 나은, also available in jQuery 인 CSS3 :nth-child() 선택기를 사용합니다.

Answer 2

당신은 또한, 모든 TBODY의 처음 3 TD, 아니라 각 행의 하나를 수행 할 수없는 경우

$('.table tbody tr').on('click', 'td:lt(3)', function(){ 
    console.log('working'); 
}); 

가 (당신이 5 코드를 시도하는 대신 3 수 할 수 에게 무슨 참조 : TD 1 TD 2 TD 3 TD 4 TR2 : TD 1 (TBODY의 제 5 TD)

jsfiddle