Jquery 보이는 요소 중 하나를 클릭하십시오 처리기

Question

내 모달 창이 표시되면 #screen을 클릭하거나 #loading_modal에서이 div를 숨길 필요가 있지만 어떻게 할 수 있으며 올바르게 작성하는 방법 내 코드가 작동하지 않습니다,하지만 또한 두 개의 개체 (# screen, #loading_modal) .... 동일한 있어요. js, 리팩토링하는 방법을이 코드를 새롭게 및 제대로 작동하게 ...?

이

$("#screen").click(function() {  
    if ($('#screen').is(':visible')) { 
     $('#screen').hide(); 
     $('#loading_modal').hide(); 
    } 
}); 
$("#loading_modal").click(function() {  
    if ($('#screen').is(':visible')) { 
     $('#screen').hide(); 
     $('#loading_modal').hide(); 
    } 
}); 

Answer 1

여기 if 문에 대한 필요가 없습니다, 당신은 간단하게 사용할 수 있습니다 내가 제대로 이해 한 경우

if ($('#screen').is(':visible')) { 
    $("#screen").click(function() {  
     $('#screen').hide(); 
     $('#loading_modal').hide(); 
    }); 
    $("#loading_modal").click(function() {  
     $('#screen').hide(); 
     $('#loading_modal').hide(); 
    }); 
    } 

Answer 2

나는 당신과 같이 클릭 핸들러 내부 가시성 검사를 넣을 필요가 있다고 생각 :

$('element:visible').click(function() { ... }) 

그래서 :

$("#screen:visible").click(function() {  
    $(this).hide(); 
    $('#loading_modal').hide(); 
}); 
$("#loading_modal:visible").click(function() {  
    $('#screen').hide(); 
    $(this).hide(); 
}); 

,

기능이 동일한 작업을 수행하려는 경우, 당신은 단순히 사용할 수 있습니다 : 당신이 잘못하고있다

$("#screen:visible, #loading_modal:visible").click(function() {  
    $('#screen').hide(); 
    $('#loading_modal').hide(); 
}); 

Answer 3

. 클릭 이벤트에서 조건을 확인할 수 있습니다. 클릭 이벤트가 발생하면 측면에서 당신은 그냥 동적으로 만들어지는 경우가

볼 수 있는지 확인할 필요가 없으며이

$("#screen,#loading_modal").click(function() { 
     $('#screen,#loading_modal').hide();  
}); 

처럼 보이도록 코드를 리팩토링 할 수

$("#screen").click(function() {  
    if ($('#screen').is(':visible')) { 
     $('#screen').hide(); 
     $('#loading_modal').hide(); 
    } 
}); 
$("#loading_modal").click(function() {  
    if ($('#screen').is(':visible')) { 
     $('#screen').hide(); 
     $('#loading_modal').hide(); 
    } 
}); 

Answer 4

클릭 이벤트 처리기를 if 실행 조건을 넣어 요소를 만든 후에 위임하거나 바인딩해야합니다.

$('body').on('click',"#screen,#loading_modal",function() { 
     $('#screen,#loading_modal').hide();  
});