Php jquery追加与样式表和类函数的关系_Php_Jquery_Css_Ajax_Class

Php jquery追加与样式表和类函数的关系

php jquery css ajax class

Php jquery追加与样式表和类函数的关系,php,jquery,css,ajax,class,Php,Jquery,Css,Ajax,Class,非常新，从一个全新的PHP/mySQL登录页面开始工作，并在我学习的过程中添加了一些功能最近添加的是一个ajax凭据验证，它在成功时用一条成功消息替换表单的.html（），然后在导航栏中添加一个.append（），添加一个注销按钮，所有操作都不需要刷新页面但是，当i.append（）将注销链接作为 <div class="nav_button"> navmenu.php login.php 这些行是invisiblelogin.js中的附加 else { $（'#contact

非常新，从一个全新的PHP/mySQL登录页面开始工作，并在我学习的过程中添加了一些功能

最近添加的是一个ajax凭据验证，它在成功时用一条成功消息替换表单的.html（），然后在导航栏中添加一个.append（），添加一个注销按钮，所有操作都不需要刷新页面

但是，当i.append（）将注销链接作为

<div class="nav_button">

navmenu.php login.php 这些行是invisiblelogin.js中的附加

else
{
$（'#contact_form'）.html（'您以'+username+'身份登录。'）；
$（“#导航链接”）。附加（“”）；
}
});
返回false；
}           
返回false；
});
});

您的悬停事件不会触发，因为您在

之前绑定了它们。页面上存在导航按钮。试试这个：
$(document).on('mouseenter', '.nav_button', function() {
    $(this).css('background-color','#979191');  
}).mouseleave(function() {
    $(this).css('background-color','#d6d6d6');
});

根据CSS属性，不要在DOM就绪函数中设置它们，而是在实际CSS文件中指定背景颜色。任何带有classnav_按钮的附加元素将获得样式。根据悬停事件不起作用的原因，当它们还不存在时，您将绑定它们，您将需要事件委派。感谢这为悬停事件起到了作用！我不得不把mouseleave单独放进它自己的.on（）中，因为它没有像写的那样工作
<?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;
?>

$(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
// ---------------------------------------- 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';
?>    

$(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();
            }

            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;
});
});

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