javascript - PHP に含まれる JavaScript が Jquery Mobile で正しく動作しない

Question

私の jquery モバイル Web アプリでは、ユーザーがナビゲートするすべてのページにログイン フォームを含めます。ユーザーがスタートページだけでなく、いつでもログインできるようにするためです。

独自の Ajax ロジックを使用してフォーム送信手順を実行するため、フォームで Jquery Mobile Ajax ロジックを無効にしdata-ajax="false"ました。Ajax ロジックは JavsScript で実装されています。スタート ページではすべて正常に動作しますが、(スタート ページのリンクを介して) 別のページに移動すると、JavaScript が起動しなくなりますが、フォームは Jquery モバイル独自の Ajax ロジックを介して送信されます (したがって、動作します)。

コード (すべてのページに含めます) は次のようになります。

   <div data-role="fieldcontain">
        <form id="loginForm" data-ajax="false" onsubmit="login();return false;">
            <div data-role="fieldcontain">
                <h2>Login</h2>
                <label for="textinput1">
                    Email
                </label>
                <input name="emaillogin" id="textinput1" placeholder="Email" value=""
                type="text">
                <label for="textinput2">
                    Password
                </label>
                <input name="passwordlogin" id="textinput2" placeholder="Password" value=""
                type="password">
            </div>
            <input type="submit" data-icon="ok" data-iconpos="left" value="OK">
            <input type="hidden" name="inputCase" value="login">
        </form>
    </div>

JavaScript (上記のコードの最後にある) は次のようになります。

<script>
function login()
{
    var request = $.ajax({
      url: "../case.php",
      type: "POST",
      data: $('#loginForm').serialize(),
      dataType: "json"
    });

    request.done(function(msg) {
            if(parseInt(msg.status)==1)
            {
                //top_notification("Willkommen zurück!","success");
                window.location="index.php";
            }
            else if(parseInt(msg.status)==0)
            {
                alert(msg.text);
            }
            else {
                alert("Gibts nicht");
            }
    });

    request.fail(function(jqXHR, textStatus) {
        alert("Fehler");
    });
}
</script>

たぶん、Jquery Mobile の「新しい URL からpage-div別のものに置き換える」という点が間違っていたのかもしれませんが、JS ロジック全体も新しいリソースから引き出されることを理解しています。page-div

編集ありがとう。JS コードを更新したところ、次のようになりました。

<script>
$(document).on('pageinit', '[data-role="page"]', function(){ 
    $(document).on('click','#submit-btn',function() {
        login();
    });      
});

function login()
{
    var request = $.ajax({
      url: "../case.php",
      type: "POST",
      data: $('#loginForm').serialize(),
      dataType: "json"
    });

    request.done(function(msg) {
            if(parseInt(msg.status)==1)
            {
                //top_notification("Willkommen zurück!","success");
                window.location="index.php";
            }
            else if(parseInt(msg.status)==0)
            {
                alert(msg.text);
            }
            else {
                alert("Gibts nicht");
            }
    });

    request.fail(function(jqXHR, textStatus) {
        alert("Fehler");
    });
}
</script>

しかし。3 つのページに移動してからログイン フォームを送信すると、関数の 3 つのアラート (1 つのサイトに移動した場合でも) が表示されrequest.failます。その後、ログインは正しく行われます。