AJAX jQuery Mobile 이후 다른 페이지 열기

여기를 참조하십시오. http://demos.jquerymobile.com/1.4.5/pages-multi-page/ 두 번째 페이지는 클릭하여 열립니다. .focus()를 사용하여 두 번째 페이지를 textarea에 열고 싶습니다.AJAX jQuery Mobile 이후 다른 페이지 열기

<a href="#other-page" data-icon="gear"></a> 

<div id="other-page" data-role="page" data-url="other-page"> 
    <div data-role="header" data-position="fixed"> 
     <a href="#" data-icon="back" class="ui-btn ui-icon-back ui-btn-icon-notext ui-corner-all" data-rel="back"></a> 
     <h1><?php _('Notifications'); ?></h1> 
    </div> 

    <div role="main" class="ui-content"> 
     <p>This is another page that can be reached using the links in the global menu.</p> 
    </div> 
</div> 

$(document).on('focus', 'textarea', function() { 
    // what functions here to open other page? 
});

감사합니다.

출처

2017-12-16 Opsional

부트 스트랩이 4 개인 모범 사례입니다.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <!-- Required meta tags --> 
    <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    </head> 
    <body> 

     <div class="py-5"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-4"> 
         &nbsp; 
        </div> 
        <div class="col-md-4"> 
         <!-- START BUTTON for MODAL1 xyz !--> 
         <button type="button" class="btn btn-primary rounded-0" data-toggle="modal" data-target="#modal1"> 
          Open modal1 
         </button> 
         <!-- START BUTTON for MODAL1 xyz !--> 
        </div> 
        <div class="col-md-4"> 
         &nbsp; 
        </div> 
       </div> 
      </div> 
     </div> 

      <!-- ▒ modal1 ▒▒▒▒▒▒▒▒▒▒▒▒ !--> 
      <!-- ░░░░░░░░░░░░░░░░░░░░░ !--> 
      <!-- ░░░░░░░░░▒▒▒▒▒░▒▒▒▒▒░ !--> 

      <!-- START modal1 xyz !--> 
      <div class="modal fade" id="modal1" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="modal1Label" aria-hidden="true"> 
       <!-- START MODAL-DIALOG xyz !--> 
       <div class="modal-dialog modal-lg" role="document"> 
        <!-- START MODAL-CONTENT xyz !--> 
        <div class="modal-content"> 
         <!-- START MODAL-HEADER xyz !--> 
         <div class="modal-header"> 
          <!-- START MODAL-TITTLE xyz !--> 
          <h5 class="modal-title" id="modal1Label">modal1 title</h5> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
           <span aria-hidden="true">&times;</span> 
          </button> 
          <!-- END MODAL-TITTLE xyz !--> 
         </div> 
         <!-- END MODAL-HEADER xyz !--> 
         <!-- START MODAL-BODY xyz !--> 
         <div class="modal-body px-3"> 
          modal1 body - Switch 
         </div> 
         <!-- END MODAL-BODY xyz !--> 
         <!-- START MODAL-FOOTER xyz !--> 
         <div class="modal-footer"> 
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
          <button type="button" class="btn btn-primary" id="btn-modal1-save-changes">Save changes</button> 
         </div> 
         <!-- END MODAL-FOOTER xyz !--> 
        </div> 
        <!-- END MODAL-CONTENT xyz !--> 
       </div> 
       <!-- END MODAL-DIALOG xyz !--> 
      </div> 
      <!-- END modal1 xyz !--> 

      <!-- ▒ modal1 ▒▒▒▒▒▒▒▒▒▒▒▒ !--> 
      <!-- ░░░░░░░░░░░░░░░░░░░░░ !--> 
      <!-- ░░░░░░░░░▒▒▒▒▒░▒▒▒▒▒░ !--> 

    <!-- jQuery first, then Popper, then Bootstrap JS. --> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 

     <script> 

     // Capture modal shown event 
      $(document).on('shown.bs.modal', '#modal1', function() { 

      console.log('shown.bs.modal Shown Event for #modal1 fired.'); 
      alert('shown.bs.modal Shown Event for #modal1 fired.'); 

      }); 

      // Capture modal hidden event 
      $(document).on('hidden.bs.modal', '#modal1', function() { 

      console.log('hidden.bs.modal Hidden Event for #modal1 fired.'); 
      alert('hidden.bs.modal Hidden Event for #modal1 fired.'); 

      }); 

      // Capture btn-modal1-save-changes click event 
      $(document).on('click', '#btn-modal1-save-changes', function (e) { 

      alert('btn-modal1-save-changes Click Event for #modal1 fired.'); 
      // Hide modal 
      $('#modal1').modal('hide'); 

      }); 

     </script> 

    </body> 
</html>

출처

2017-12-16 23:22:46 ASPiRE

그래,하지만 난 .focus에서 열린'다른-page'을 (원하는) – Opsional

마지막으로 찾았습니다. 희망은 도움의 셈이다.

$(document).on('focus', 'textarea', function() { 
    $.mobile.changePage('#other-page'); 
});

출처

2017-12-16 23:27:16 Opsional

여기 문서를 참조하십시오 : [Pagecontainer 위젯 (http://api.jquerymobile.com/pagecontainer/#method-change) : $ (": mobile-pagecontainer") .pagecontainer ("change", "# other-page"); – deblocker

AJAX jQuery Mobile 이후 다른 페이지 열기

답변

관련 문제