如何将CSS添加到jquery .html()？

我有如下jQuery代码：

$(document).ready(function()
{
$("#createaccount").submit(function(e){
    var fname = $("#fname").val();
    var surname = $("#surname").val();
    var email = $("#email").val();
    var location = $("#location").val();
    var username = $("#username").val();
    var password = $("#password").val();
    var re_pass = $("#re_password").val();

    var valid = true;

    if(fname == ""){
        $("#fnameerror").html('<span class="errortext">Please enter your first name</span>');
        valid = false;
    }

    if(surname == ""){
        $("#surnameerror").html('<span class="errortext">Please enter your surname</span>');
        valid = false;

    }

    if(email == ""){
        $("#emailerror").html('<span class="errortext">Please enter an email address</span>');
        valid = false;

    }
    else{
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if(reg.test(email)==false){
            $("#emailerror").html('<span class="errortext">The email address is invalid</span>');
            valid = false;
        }
    }

    if(location == ""){
        $("#locationerror").html('<span class="errortext">Please enter your location</span>');
        valid = false;
    }

    if(username == ""){
        $("#usernameerror").html('<span class="errortext">Please enter a username</span>');
        valid = false;
    }
    else{
        if(username.length < 6){
            $("#usernameerror").html('<span class="errortext">Username must be at least 6 characters long</span>');
            valid = false;
        }
    }

    if(password == ""){
        $("#passworderror").html('<span class="errortext">Please enter a password</span>');
        valid = false;
    }
    else{
        if(password.length < 6){
            $("#passworderror").html('<span class="errortext">Password must be at least 6 characters long</span>');
            valid = false;
        }
    }

    if(re_pass == ""){
        $("#re_passerror").html('<span class="errortext">Please re-enter your password</span>');
        valid = false;
    }
    else{
        if(re_pass != password){
            $("#re_passerror").html('<span class="errortext">The passwords do not match</span>');
            valid = false;
        }
    }

    if(valid == false){
        return false;
    }
    else{
        $.ajax({
            type: 'POST',
            url: 'createaccount2.php',
            data: $("#createaccount").serialize(),
            success: function(response){

                if(response == "1"){
                    $("#response").html('<span class="responsefail">Your username has already been taken, please enter another</span>');
                }
                else if(response == "2"){
                    $("#response").html('<span class="responsefail">An account is already registered to that email</span>');
                }
                else if(response == "3"){
                    $("#response").html('<span class="responsegood">Your account has been created!</span>');
                    $("#redirect").html('<span class="redirect">Click</span><a class="redirectlink" href="divbayindex.htm">HERE</a><span class="redirect"> to return to the DiveBay homepage</span>');
                }
                else if(response == "4"){
                    $("#response").html('<span class="responsefail">Something went wrong, your account could not be created, please try again in a moment</span>');
                    $("#redirect").html('<span class="redirect">Click</span><a class="redirectlink" href="divbayindex.htm">HERE</a><span class="redirect"> to return to the DiveBay homepage</span>');

                }
            }

        });
    e.preventDefault();
    }
    });





});

我想知道如何在此范围内添加样式。原始页面的css文件中包含了这些span类的css，但是当该span被函数加载时，它的显示方式与默认情况相同。我在另一个页面上加载了一个搜索结果表，并且在默认显示的情况下，也遇到了类似的问题。这与外部CSS有关吗？

The CSS rules should apply to all elements on screen, not just the ones that were there when the page was first loaded. I would check the css selectors to make sure that they match the class name(, make sure you remembered the . before the class)

You dont have to do anything specific to make the CSS apply to the created span. Just style it as you would with any other class, for example:

.redirect {
  color: #EEE;
  font-size: 15px;  
}

.responsefail {
  color: #FF0000;
  font-size: 20px;
}

The style for these classes will then load with the freshly inserted elements even though the stylesheet were loaded before they were even created.

If you'd however prefer to add the css with jquery, you could just go ahead and add

$('.yourclass').css('attribute', 'value');

in each if-action.

If this doesn't help you further, please provide the html code for the page.