DIV를 클릭하지 않고 숨기기

동적으로 생성 된 양식 시스템이 있습니다.DIV를 클릭하지 않고 숨기기

아래 코드는 캘린더를 호출하는 버튼입니다.

<input id="btn1_0" type="button" value="☵" class="rsform-calendar-box btnCal rsform-calendar-button btn btn-default" onclick="RSFormPro.YUICalendar.showHideCalendar('cal1_0Container');">

위의 버튼을 클릭했을 때 표시되는 div는 다음과 같습니다. 이 DIV 내에서 클릭 할 때이 버튼은 스타일 display:none을 전환 :

<div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> 
Calendar Here 
</div>

나는 사람이 너무 사업부의 외부를 클릭하면 달력을 숨길.

이 JS를 시도했지만 div에 display:none을 설정하면 작동하지 않습니다. 내가 도대체 뭘 잘못하고있는 겁니까? 내가 무엇을 달성 할 수있는 예를 찾아 당신의 YUICalendar 라이브러리를 사용하려는 경우에이 https://developer.yahoo.com/yui/calendar/

@ 공식 문서를 살펴보고 혜택을 누릴 수처럼 보이는

jQuery(document).click(function(event) { 
    if (!jQuery(event.target).hasClass('yui-calcontainer')) { 
     jQuery(".yui-calcontainer").hide(); 
    } 
});

출처

2016-08-27 Elaine Byene

은 알려주세요. –

달성하려는 : https://developer.yahoo.com/yui/examples/calendar/calcontainer_clean.html

출처

2016-08-27 04:44:39 Sterling

클릭 이벤트를 문서에 바인딩 할 수 없습니다. 그것을 몸에 묶어 라.

jQuery('body').click(function(event) { 
    if (!jQuery(event.target).hasClass('yui-calcontainer')) { 
     jQuery(".yui-calcontainer").hide(); 
    } 
}); 

or 

jQuery(document).on('click', 'body', function(event) { 
    if (!jQuery(event.target).hasClass('yui-calcontainer')) { 
     jQuery(".yui-calcontainer").hide(); 
    } 
});

출처

2016-08-27 04:51:18 depiction

두 솔루션을 모두 시도했는데 그 결과는 같습니다. JS를 추가하면 기본 상태가 '

'으로 변경되므로 'display; none'이 기본적으로 실행되므로 버튼이 더 이상 작동하지 않습니다. –

디스플레이 없음을 추가하므로이 JS 코드가 작동하므로 다른 것이 원인입니다. 나는 YUICalendar에 익숙하지 않지만 대상에 "yui-container"클래스가있을 때 JS에서 RSFormPro.YUICalendar.showHideCalendar ('cal1_0Container')와 같은 showHide 함수를 호출 해 볼 수있다. – depiction

div는 그의 함수가있는 버튼으로도 호출됩니다 :'onclick = "RSFormPro.YUICalendar.showHideCalendar ('cal1_0Container');"'자바 스크립트를 추가하면 작동을 멈 춥니 다. –

당신은

그것은이 경우 알려주세요 체크

$(document).dblclick(function (e) 
 
           { 
 
       var container = $(".yui-calcontainer"); 
 
       if (!container.is(e.target) // if the target of the click isn't the container... 
 
        && container.has(e.target).length === 0) // ... nor a descendant of the container 
 
       { 
 
        container.hide(); /// or container.toggle(); to show/hide 
 

 
       } 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body style="height:100% ; width:100%;";> 
 

 
     <div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> 
 
      Calendar Here 
 
     </div> 
 
    </body>

쇼 사용 container.toggle(); 다음이 코드/숨기기이 같은 몇 가지 트릭을 사용할 수 있습니다 당신에게 도움이됩니다.

이

내 HTML이었다 내 대답은 당신에게 도움이 있다면

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script> 
      $(document).dblclick(function (e) 
           { 
       var container = $(".yui-calcontainer"); 
       if (!container.is(e.target) // if the target of the click isn't the container... 
        && container.has(e.target).length === 0) // ... nor a descendant of the container 
       { 
        container.toggle(); 
       } 
      }); 
     </script> 
    </head> 
    <body style="height:100% ; width:100%;";> 

     <div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> 
      Calendar Here 
     </div> 
    </body> 
</html>

출처

2016-08-27 05:18:34

어디에서'container.toggle();'을 추가할까요? 생성 된 양식을 변경할 수 없습니다! 내가 사용할 수있는 양식의 ID 또는 클래스 만 사용할 수 있습니다. –

감사합니다. 정말 감사하고 표를 던졌습니다. 그러나, 당신은 내 질문을 이해하지 않았다 :( –

DIV를 클릭하지 않고 숨기기

답변

관련 문제