相当新的，从头开始工作PHP/mySQL登录页面和添加功能，因为我了解他们..
最近添加的是ajax凭据验证，它在成功时用成功消息替换表单的.html()，然后在导航栏上添加一个.append()，添加一个注销按钮，所有这些都不需要刷新页面。
上面的过程可以完美地运行，但是当i .append()将logout链接作为
<div class="nav_button">
它不继承。nav_button样式表中的任何类CSS，也不会触发链接到
类的javascript悬停事件。谁能给我解释一下这个问题的原因，以及解决这个问题的方法?代码在下面，也欢迎任何批评代码，仍在学习!谢谢。
style.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
// ---------------------------------------- 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;
});
});
你的悬停事件没有触发，因为你在.nav_button存在于页面之前绑定了它们。试试这个:
$(document).on('mouseenter', '.nav_button', function() {
$(this).css('background-color','#979191');
}).mouseleave(function() {
$(this).css('background-color','#d6d6d6');
});
根据CSS属性，不要在DOM ready函数中设置它们，在实际的CSS文件中指定背景颜色。任何带有nav_button类的附加元素都将获得样式。