2012-08-08 90 views
1

您好我有工作jQuery代码位是:添加CSS来的jQuery的.html()负载

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





}); 

我只是想知道如何风格添加到这个范围。 ive在原始页面的css文件中包含了这些跨度类的css,但是当该跨度被该函数加载时,它将以默认值显示。

我有一个类似的问题,我加载了一个搜索结果的表,它只显示为默认的另一页。我想它与外部CSS参考有关吗?

+2

如果存在匹配的规则,则任何现有的CSS都将应用于DOM插入的内容。使用类似Firebug或Dragonfly的东西检查插入的跨度,试图了解为什么这些规则不附加到这些元素。如果规则匹配,他们不应该没有理由。 – Utkanos 2012-08-08 08:12:58

回答

0

CSS规则应该适用于屏幕上的所有元素,而不仅仅是第一次加载页面时的那些元素。我会检查CSS选择器,以确保它们与类名相匹配(请确保您记得在课前)

0

您不必为使CSS适用于创建的跨度而做任何特定操作。只是它的样式,你会与其他任何类,例如:然后

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

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

的风格,这些类将有即使人甚至创建它们的样式表加载刚插入的元素加载。

如果您想不过更喜欢用jQuery添加CSS,你可以先走一步,在每个如果行动增加

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

如果这对你没有帮助,请提供页面的html代码。