두 이벤트 바인딩, 실행 순서 제어

Question

동일한 요소에 바인딩 된 두 이벤트에 문제가 있습니다. 기본적으로 하나의 이벤트는 모든 체크 박스에 바인딩되며 하나의 이벤트는 특정 체크 박스 (#ID 포함)에 바인딩됩니다. 동시에 트리거하지만 ID 고유의 이벤트 코드가 먼저 실행되기를 원합니다.

이 두 이벤트가 정확히 같은 순간에 트리거,하지만 난 #의 valid_only의 이벤트가 검색 버튼이 일반 체크 박스 이벤트를 클릭 전에 실행하려면 :

.on('change', '#search-form input:checkbox', function() { 
    $('#reset').button('enable'); 

    $('#search').trigger('click'); 
}).on('change', '#valid_only', function() { 
    $('input:hidden[name="valid"]').val($(this).is(':checked') ? true : ''); 
    $('input:hidden[name="total"]').val($(this).is(':checked') ? '' : true); 

    if (!$('#stats td[data-tag="months_to_expiry"], #stats td[data-tag="expired"]').hasClass('current')) { 
     $('#stats td[data-tag="valid"]').toggleClass('e', !$('#valid_only').is(':checked')).toggleClass('current', $('#valid_only').is(':checked')); 
     $('#stats td[data-tag="total"]').toggleClass('e', $('#valid_only').is(':checked')).toggleClass('current', !$('#valid_only').is(':checked')); 
    } 
}); 

Answer 1

것도이 같은에서 "일하지를 JavaScript에서 "시간"은 - 그것은 (대부분) 싱글 스레드입니다. 이벤트는 핸들러 등록 순서에서 정확히 트리거됩니다.

따라서 앞에 #valid_only을 등록해야합니다.

은보다 구체적인 핸들러에서 event.stopPropagation()을 호출하여 이벤트가보다 일반적인 핸들러로 버블 링되지 않도록해야합니다.

Answer 2

여기에 의존하지 마십시오. 코드에서 실행 순서를 적용 :

.on('change', '#search-form input:checkbox', function() { 
    if ($(this).id() === 'valid_only'){ 
     updateVisibilityValid($(this).is(':checked')); 
    } 

    $('#reset').button('enable'); 
    $('#search').trigger('click'); 
} 

Answer 3

가 왜 그냥 몇 가지 기능과 후 두 번째 부분을 넣어 '# 검색 폼 입력 : 체크 박스'기능은 작업의 완료, 바로 전화가 기능 :

.on('change', '#search-form input:checkbox', function() { 
    $('#reset').button('enable'); 

    $('#search').trigger('click'); 
    foo_function(); 
}); 

function foo_function(){/* second part of "on change" */}