.not()과 .click()을 사용하여 클래스를 무시합니다.

각 행에 확인란이있는 표가 있습니다. checkbox 이외의 tr에 아무 곳이나 클릭하면 발생하는 .click 함수를 수행하고 싶습니다..not()과 .click()을 사용하여 클래스를 무시합니다.

행은 class = "message"이고 확인란을 포함하는 td는 class = "ignore_checkbox"입니다.

이 내 JQuery와/JS입니다 :

$('.message').not('.ignore_checkbox').click(respondToMessage);

하지만 난 체크 박스를 클릭하면 여전히 respondToMessage 함수를 호출합니다. 어떤 아이디어?

<?php foreach ($accountMessages as $accountMessage): ?> 
<tr class="message overview"> 
    <td class="ignore_checkbox" ><?php echo $this->Form->checkbox(
     'AccountMessages.'.$accountMessage['AccountMessage']['id'], 
     array('value' => $accountMessage['AccountMessage']['id'], 
     'hiddenField' => false, 
     'multiple' => true)); ?> 
    </td> 
    <td> 
     <strong><?php echo h($accountMessage['Account']['email']);?></strong><br/> 
     <span class="message_time"><?php echo $this->Time-      TimeAgoInWords($accountMessage['AccountMessage']['created'], array('format' => 'F jS, Y', 'end' => '+1 year'))?></span> 
     <?php echo h($accountMessage['AccountMessage']['title']); ?><br/> 
     <?php echo h($accountMessage['AccountMessage']['message']); ?> 

    </td> 
</tr> 
<?php endforeach; ?>

출처

2012-10-26 Cara Turpin

HTML (관련 부분)도 게시 할 수 있습니까? – salih0vicX

간단히처럼 기존 규칙에 td를 추가합니다. 규칙이 테이블 행 <tr>에서 시작하므로 .not()은 (는) 일치하지 않습니다. 대신 표 셀 <td>에서 일치시킴으로써 정상적으로 작동합니다.

다음은 빠른 jsFiddle example입니다.

출처

2012-10-26 17:12:29 j08691

그래, 그것은 ... 내 나쁜 –

이 방법을 사용하면 체크 박스를 포함하는 TD를 클릭 할 수 없습니다났습니다. –

@JoseFaeti은 - 당신은 왜 필요합니까? – j08691

이

$ 시도에 ('클릭'기능 (전자) {

if(e.target.className.indexOf('ignore_checkbox') > -1 
    || e.target.type == 'checkbox'){ 
     // do Nothing 
} 
else{ 
    alert('Not checkbox'); 
}

을}) ('메시지를.');.

Check FIDDLE

출처

2012-10-26 17:09:17

메모는 className이 이미 존재하기 때문에 항상 실패 할 것이라고 생각하십시오 .. 'this.className.indexOf ("...")! == -1' – andlrc

td 함유 물에 e.stopPropagation을 사용해야합니다.

$('.ignore_checkbox').click (function (e) { 
    e.stopPropagation(); 
});

에 TR까지 TD 의지 거품 이벤트를 클릭하거나 다른 답변처럼 .message 핸들러 내부에서 처리 할 수에로 g 확인란을 선택합니다.

출처

2012-10-26 17:09:19

더 많은 이벤트 리스너를 첨부하면 좋지 않습니다. (아마도 두 배로 늘릴 수도있다). 체크 박스가 포함 된 행에 이벤트 리스너가 이미 있으므로 추가 할 필요가 없습니다. 사실

요소에있는 단일 이벤트 수신기 만 이벤트가 더 좋을 것입니다. –

@JoseFaeti 사실

요소의 단일 이벤트 리스너 만 이벤트가 더 좋을 것입니다 ._ --- 전적으로 처리기 내부에 무엇이 있는지에 달려 있습니다.목표 '하지만 여전히 더 잘 처리하지 못합니다. –

하지만 당신은 자원을 절약하며, 그 (보통) 바람직합니다. –

$('.message').click(function(event) { 

    if (! $(event.target).hasClass('ignore_checkbox')) 
    { 
     respondToMessage(); 
    } 
});

언제나 나는 그것이 포함하는 모든 행에 클릭 이벤트를 수신 할 수있는 요소에 하나의 이벤트 리스너를 사용하는 것이 좋습니다 것입니다. 이렇게하면 리소스를 절약하고 모든 이벤트 리스너 하나만 있으면됩니다.

Check the fiddle here.

출처

2012-10-26 17:10:51

에 한번 사용 이벤트 버블 링. .not() 작품을 사용

$('.message td').not('.ignore_checkbox').click(respondToMessage);

당신의 생각을하지만, 그것은 단지 일치하는 요소에서 작동 :

$('.message').on('click', ':not(.ignore_checkbox)', function(event) { 
// enter code here 
});

출처

2012-10-26 17:11:48

.not()과 .click()을 사용하여 클래스를 무시합니다.

답변

관련 문제