jQuery Mobile Scroll View의 체크 박스

jQuery Mobile 팝업 대화 상자의 스크롤 창에 숨겨진 부분의 체크 박스가 작동하지 않고 단순히 맨 위로 이동하는 이유가 있습니까?jQuery Mobile Scroll View의 체크 박스

<div data-role="popup" id="chkSelector" data-overlay-theme="a" 
     data-theme="a" data-dismissible="true"> 

     <div style="width:500px; height:300px; overflow-y:auto;"> 
      <label for="checkbox-1">021669835973</label> 
      <input name="checkbox-1" id="checkbox-1" type="checkbox"> 
      <label for="checkbox-2">021669835976</label> 
      <input name="checkbox-2" id="checkbox-2" type="checkbox"> 
      <label for="checkbox-3">021669835983</label> 
      <input name="checkbox-3" id="checkbox-3" type="checkbox"> 
      <label for="checkbox-4">021669836973</label> 
      <input name="checkbox-4" id="checkbox-4" type="checkbox"> 
      <label for="checkbox-5">021669837973</label> 
      <input name="checkbox-5" id="checkbox-5" type="checkbox"> 
      <label for="checkbox-6">021669855973</label> 
      <input name="checkbox-6" id="checkbox-6" type="checkbox"> 
      <label for="checkbox-7">021669935973</label> 
      <input name="checkbox-7" id="checkbox-7" type="checkbox"> 
      <label for="checkbox-8">021669835973</label> 
      <input name="checkbox-8" id="checkbox-8" type="checkbox"> 
      <label for="checkbox-9">021669835976</label> 
      <input name="checkbox-9" id="checkbox-9" type="checkbox"> 
      <label for="checkbox-10">021669835983</label> 
      <input name="checkbox-10" id="checkbox-10" type="checkbox"> 
      <label for="checkbox-11">021669836973</label> 
      <input name="checkbox-11" id="checkbox-11" type="checkbox"> 
      <label for="checkbox-12">021669837973</label> 
      <input name="checkbox-12" id="checkbox-12" type="checkbox"> 
      <label for="checkbox-13">021669855973</label> 
      <input name="checkbox-13" id="checkbox-13" type="checkbox"> 
      <label for="checkbox-14">021669935973</label> 
      <input name="checkbox-14" id="checkbox-14" type="checkbox">       
     </div> 

    </div>

창 높이 아래에서 잘리지 않는 상위 것들만 선택할 수 있습니다. 아래쪽이보기로 스크롤되고 선택되면 목록은 선택하지 않고 맨 위로 스크롤합니다.

출처

2017-10-09 iSofia

당신이 그 이유를 요구하는 경우, 단순히 Popups 의도 깊이 그러나 다만 작은 힌트 또는 작은 탐색 - 메뉴에 대한, 에 대한 대화 형 콘텐츠를 많이 테스트하지 않습니다 믿습니다. 사용자에게 많은 대화 형 컨텐츠을 제시해야한다면, Dialog 옵션이있는 IMHO가 더 나은 선택입니다. 그냥 내 두 센트.

해결 방법을 요청하는 경우 여기를 클릭하십시오. External Popup을 초기화하고 사용하십시오.

$(document).ready(function() { 
 
    $("#chkSelector").enhanceWithin().popup(); 
 
});

.ui-popup .ui-checkbox { 
 
    margin-right: 0.5em !important; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div data-role="page" id="menu"> 
 
     <div data-role="header" data-position="fixed"> 
 
     <h1>Header</h1> 
 
     </div> 
 
     <div data-role="content"> 
 
     <a href="#chkSelector" class="ui-btn" data-rel="popup">Open Popup</a> 
 
     </div> 
 
    </div> 
 
    
 
    <div data-role="popup" id="chkSelector" data-overlay-theme="a" data-theme="a" class="ui-content" data-dismissible="true"> 
 
     <div style="width:500px; height:300px; overflow-y:auto;"> 
 
      <label for="checkbox-1">021669835973</label> 
 
      <input name="checkbox-1" id="checkbox-1" type="checkbox"> 
 
      <label for="checkbox-2">021669835976</label> 
 
      <input name="checkbox-2" id="checkbox-2" type="checkbox"> 
 
      <label for="checkbox-3">021669835983</label> 
 
      <input name="checkbox-3" id="checkbox-3" type="checkbox"> 
 
      <label for="checkbox-4">021669836973</label> 
 
      <input name="checkbox-4" id="checkbox-4" type="checkbox"> 
 
      <label for="checkbox-5">021669837973</label> 
 
      <input name="checkbox-5" id="checkbox-5" type="checkbox"> 
 
      <label for="checkbox-6">021669855973</label> 
 
      <input name="checkbox-6" id="checkbox-6" type="checkbox"> 
 
      <label for="checkbox-7">021669935973</label> 
 
      <input name="checkbox-7" id="checkbox-7" type="checkbox"> 
 
      <label for="checkbox-8">021669835973</label> 
 
      <input name="checkbox-8" id="checkbox-8" type="checkbox"> 
 
      <label for="checkbox-9">021669835976</label> 
 
      <input name="checkbox-9" id="checkbox-9" type="checkbox"> 
 
      <label for="checkbox-10">021669835983</label> 
 
      <input name="checkbox-10" id="checkbox-10" type="checkbox"> 
 
      <label for="checkbox-11">021669836973</label> 
 
      <input name="checkbox-11" id="checkbox-11" type="checkbox"> 
 
      <label for="checkbox-12">021669837973</label> 
 
      <input name="checkbox-12" id="checkbox-12" type="checkbox"> 
 
      <label for="checkbox-13">021669855973</label> 
 
      <input name="checkbox-13" id="checkbox-13" type="checkbox"> 
 
      <label for="checkbox-14">021669935973</label> 
 
      <input name="checkbox-14" id="checkbox-14" type="checkbox">       
 
     </div> 
 
    </div> 
 
    
 
    </body> 
 
</html>

출처

2017-10-11 07:31:54 deblocker

jQuery Mobile Scroll View의 체크 박스

답변

관련 문제