0

相当新，从头开始 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;
}

导航菜单.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;
?>

导航按钮.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');
});
});

登录.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;
});
});
4

1 回答 1

1

您的悬停事件没有触发，因为您在.nav_button页面上存在之前绑定了它们。尝试这个：

$(document).on('mouseenter', '.nav_button', function() {
    $(this).css('background-color','#979191');  
}).mouseleave(function() {
    $(this).css('background-color','#d6d6d6');
});

根据 CSS 属性，不要在 DOM 就绪函数中设置它们，在实际 CSS 文件中指定背景颜色。任何带有类的附加元素nav_button都将获得样式。

于 2013-06-09T00:06:50.157 回答