ページの更新までホームとログアウトボタンは機能しません

Question

私のヘッダーには2つのボタンがあります.1つはログアウト用に&です。両方のボタンが表示されます。しかし、私はページを更新しない限り動作しません。私のコードが添付されています。ボタンはホームページでは動作しますが、リダイレクトされた他のページでは機能しません。

JS：

$(document).ready(function() { 

    $("#btnLogout").bind("click", function() { 
     window.location = "login.html"; 
    }); 

    $("#btnHome").bind("click", function() { 
     window.location = "home.html"; 
    }); 
}); 

HTML：

<div data-role="header" class="header" data-position="fixed" style="text-align:center"> 
    <input type="button" id="btnHome" class="ui-btn ui-icon-home ui-btn-icon-left" value="Home" /> 
    <input type="button" id="btnLogout" class="ui-btn-right" value="Logout" /> 
</div> 

助けてください！

Answer 1

なぜこれらのクリックが負荷のかかるウィンドウ内に配置されているのですか？ </body>の直前にスクリプトタグを置くと、on.load（この場合）のonは必要ありません。この機能を削除して、そのような結果を確認してみてください。

$("#btnLogout").bind("click", function() { 
    window.location = "login.html"; 
}); 

$("#btnHome").bind("click", function() { 
    window.location = "home.html"; 
}); 

Answer 2

ロード機能が動作していません。代わりに$(window).ready(function())を使用してください。

$(window).ready(function() { 

    $("#btnLogout").bind("click", function() { 
     window.location = "login.html"; 
    }); 

    $("#btnHome").bind("click", function() { 
     window.location = "home.html"; 
    }); 
}); 

Answer 3

このロード機能が$(window).on("load", function() {間違っているあなたは、このコード

Answer 4

ファーストを試してみてください$(window).ready(function() {

$(window).ready(function() { 

    $("#btnLogout").bind("click", function() { 
     window.location = "login.html"; 
    }); 

    $("#btnHome").bind("click", function() { 
     window.location = "home.html"; 
    }); 
}); 

functin準備を追加することができ、loadイベントの窓の内側にbindメソッドを使用することは完全に罰金です。しかし、それはJQueryバージョン3.0では廃止されました！したがって、互換性のないバージョンを使用している可能性が非常に高いです。

代わりに、あなたが使用する必要があります。

$("#btnLogout").on("click", function() { 
    window.location = "login.html"; 
}); 

$("#btnHome").on("click", function() { 
    window.location = "home.html"; 
}); 

を見てわかるように、構文はかなり似ています。

チェックアウト私のランニングコードhere：

:)

Answer 5

あなたのボタンが動的に生成されている場合は、ドキュメントの方法で直接DOMにアクセスすることができます。

$(document).ready(function() { 
 
    $(document).on("click","#btnLogout", function() { 
 
     alert(1) 
 
     //window.location = "login.html"; 
 
    }); 
 

 
    $(document).on("click","#btnHome", function() { 
 
     alert(2) 
 
     //window.location = "home.html"; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-role="header" class="header" data-position="fixed" style="text-align:center"> 
 
    <input type="button" id="btnHome" class="ui-btn ui-icon-home ui-btn-icon-left" value="Home" /> 
 
    <input type="button" id="btnLogout" class="ui-btn-right" value="Logout" /> 
 
</div>