2012-08-08 88 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代碼。