よろしくお願いします。

jquerymobileでダイアログをポップアップし、フォームの入力画面がでて入力したら
データが保存され、元の画面に切り替わるということをしたいです。

今の状態ですと、ポップアップのボタンをクリックさせても画面が切り替わらないので切り替わるようにしたいです。

よろしくお願いします。


//js

 <script>

    (function() {
        $("#time1").click(ontime1);
    });

    function ontime1() {
        var te1 = $("#t1").val();
        var tt1 = {
            t1:te1, 
        }
        localStorage.setItem("time1", JSON.stringify(tt1));
        $.mobile.changePage("#tk11", { reverse: true });
    }
 </script>






   //html
<div data-role="page">
    <div id="popup" data-role="popup" data-overlay-theme="b"
    data-dismissible="false" style="max-width:500px;">
    <div data-role="header" data-theme="b">
      <h1>てすと</h1>
    </div> 
    <div role="main" class="ui-content">
       <form>
    <fieldset>
        <p>日付をいれる。</p>
            <label for="jquery-ui-dialog-form-name">日付</label>
            <input type="date" name="jquery-ui-dialog-form-name" id="t1" class="text ui-widget-content ui-corner-all" value="" />
             <a href="" id="time1" data-role="button" data-inline="false">設定</a> 
        </p>
    </fieldset>
    </form>
    </div>
  </div>
  <div data-role="header" id="tk11">
    <h1>jQuery Mobile TIPS</h1>
  </div>
  <div role="main" class="ui-content">
   <table id="jquery-ui-dialog-table" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header ">
            <th id="table-th-name">てす</th>
            <th id="table-th-comment">てす</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>てす</td>
            <td>てす</td>
        </tr>
    </tbody>
</table>
<div class="jquery-ui-button">
    <a href="#popup" data-rel="popup" data-transition="pop"
      class="ui-btn ui-corner-all ui-btn-icon-left ui-icon-check">追加</a>
</div>
  </div>
  <div data-role="footer">
    <h3>Copyright </h3>
  </div>
</div>