かなり新しく、PHP/mySQL ログイン ページをゼロから作成し、学習した機能を追加しています。
最近追加されたのは ajax クレデンシャル検証で、成功するとフォームの .html() が成功メッセージに置き換えられ、続いて .append() がナビゲーション バーに追加され、ログアウト ボタンがページの更新なしで追加されます。
上記のプロセスは完全に機能しますが、ログアウトリンクを .append() すると
<div class="nav_button">
.nav_buttonのスタイルシートのクラスCSSを継承せず、クラスにリンクしたjavascriptホバーイベントをトリガーしません
誰かがこの原因とこの問題を解決する方法を私に説明できますか? コードは以下のとおりです。また、コードに対する批判は歓迎されますが、まだ学習中です!
ありがとう。
スタイル.css
.nav_button {
display: inline;
border: 1px solid grey;
padding: 5px 5px 5px 5px;
margin: 3px 3px 3px 3px;
}
navmenu.php
<?php
// ---------------------------------------- Navigation bar ----------------------------------------
// Generate the navigation menu
$navbar = "";
$navbar = '<div id="nav_menu"><hr /><div id="nav_links">' . '<div class="nav_button"><a href="index.php">Home</a></div>' .
'<div class="nav_button"><a href="signupAJAX.php">Sign Up</a></div>' .
'<div class="nav_button"><a href="loginAJAX.php">Log In</a></div>';
if (isset($_SESSION['username'])) // adds logout if logged in
{
$navbar = $navbar . '<div class="nav_button"><a href="logout.php">Log Out <b><font color ="red">(' . $_SESSION['username'] . ')</font></b></a></div>';
}
$navbar = $navbar . '</div><hr /></div>';
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="navbutton.js"></script>
<?php
echo $navbar;
?>
navbutton.js
$(document).ready(function()
{
$('.nav_button').css('background-color', '#d6d6d6');
});
$(function()
// ---------------------------------------- Nav button effects ----------------------------------------
{
$('.nav_button').mouseenter(function()
{
$(this).css('background-color','#979191');
});
$('.nav_button').mouseleave(function()
{
$(this).css('background-color','#d6d6d6');
});
});
login.php
<?php
// ---------------------------------------- User login page ----------------------------------------
require_once 'startsession.php';
$page_title = 'Log In';
require_once 'header.php';
require_once 'navmenu.php';
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="invisiblelogin.js"></script>
<?php
// Show login form if user not logged in
if (empty($_SESSION['user_id']))
{
?>
<html>
<div id="contact_form">
<form action="" name="contact">
<fieldset><legend>Log In Info</legend>
<label class="error" for="username" id="username_error">Invalid username/password combination.</label>
<font color="red"><div id="Info"></div></font>
<table>
<tr><td><label for="username" id="username_label">Username:</label>
<input type="text" id="username" name="username" value="" class="text-input" /></td>
<td><label class="error" for="username" id="username_error2">Enter your username.</label></td></tr>
<tr><td><label for="password" id="password_label">Password:</label>
<input type="password" id="password" name="password" value="" class="text-input" /></td>
<td><label class="error" for="password" id="password_error">Enter your password.</label></td></tr>
</table>
<input type="submit" name="submit" class="button" id="submit_btn" value="Sign Up" />
</fieldset>
</form>
</div>
</html>
<?php
}
else
{
// Shown if user is logged in
echo('<p class="login">You are logged in as <b><font color ="red">' . $_SESSION['username'] . '</b></font>.</p>');
}
require_once 'footer.php';
?>
invisiblelogin.js
$(document).ready(function()
{
$('.error').hide();
$('#Info').hide();
$('#loggedin').hide();
});
// ---------------------------------------- Verifies form fields have entries ----------------------------------------
$(function()
{
$('.error').hide();
$(".button").click(function()
{
$('.error').hide();
var username = $("input#username").val();
var password = $("input#password").val();
if (username == "" || password == "")
{
if (username == "")
{
$("label#username_error2").show();
$("input#username").focus();
}
if (password == "")
{
$("label#password_error").show();
$("input#password").focus();
}
return false;
}
// Validation function
if (username.length > 0 && password.length > 0)
{
$.post("logincheck.php", {
username: $('#username').val(),
password: $('#password').val() },
function(response)
{
var valid = unescape(response);
if (valid == 0)
{
$("label#username_error").show();
}
これらの行は invisiblelogin.js の追加です
else
{
$('#contact_form').html('<p class="login">You are logged in as <b><font color ="red">' + username + '</b></font>.</p>');
$('#nav_links').append('<div class="nav_button"><a href="logout.php">Log Out <b><font color ="red">(' + username + ')</font></b></a></div>');
}
});
return false;
}
return false;
});
});