在AJAX jQuery Mobile之后打開其他頁面

Question

我在這里看到http://demos.jquerymobile.com/1.4.5/pages-multi-page/，但單擊打開第二頁。 我想在textarea上用.focus（）打開第二頁。

<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?
});

謝謝。

Answer 1

具有Bootstrap 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>

Answer 2

最后，我發現了。 希望是幫助semobody。

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

在AJAX jQuery Mobile之后打開其他頁面

問題描述

2 個解決方案

解決方案1
0 2017-12-16 23:22:46

解決方案2
0 2017-12-16 23:27:16

在AJAX jQuery Mobile之后打開其他頁面

問題描述

2 個解決方案

解決方案1 0 2017-12-16 23:22:46

解決方案2 0 2017-12-16 23:27:16

解決方案1
0 2017-12-16 23:22:46

解決方案2
0 2017-12-16 23:27:16