多個複選框中的jQuery移動彈出

http://jsfiddle.net/yptgdhqv/2/多個複選框中的jQuery移動彈出

滾動到最後一個複選框元素彈出並單擊。焦點停留在第一個元素上，窗口返回頂部。這是爲什麼發生？我已經嘗試給每個複選框/標籤唯一的ID，這不是問題。

這是jQuery手機1.4.5中的一個bug嗎？它在早期版本中不會發生。

編輯：這顯然是兩個單獨的問題。我不在乎焦點的轉變。但是窗口滾動是一個問題，無論彈出窗口中的內容是什麼類型，無論是複選框還是僅僅是段落元素。

 <div data-role="content"> 
      <a href="#" data-role="button" id="test-button">Test popup</a> 
      <div data-role="popup" id="confirmDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all"> 
       <div data-role="header" data-theme="a" class="ui-corner-top"> 
        <h1>Delete Page?</h1> 
       </div> 
       <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> 

       <form> 

        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 
        <label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Housing<input type="checkbox"> </label> 



        <h3 class="ui-title">Are you sure you want to delete this page?</h3> 
        <p>This action cannot be undone.</p> 
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>  
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a> 
       </div> 
       </form>    
      </div> 
     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div> 
</body> 
</html>

來源

2017-06-19 Clay

把你的彈出頁面外，並通過代碼初始化：

$(function(){ 
    $("#confirmDialog").enhanceWithin().popup(); 
});

這裏是外部彈出窗口參考：Using the same popup across multiple pages

順便說一句，要知道有一個很大的問題你的片段，但我想你即將從舊的JQM版本遷移到1.4.5，你還沒有調整整個東西...

來源

2017-06-19 20:55:02 deblocker

多個複選框中的jQuery移動彈出

回答

相關問題