未使用javascript更新的div元素

您能否看到爲什麼div（＃welcome）未在下面的代碼中更新？未使用javascript更新的div元素

function show_logged_in(success) 
{ 

    var is_logged_in = success; 

    var dataString = {"reg":invalid, "login":invalid,"is_logged_in":is_logged_in}; 

    $.ajax({ 
     type:"POST", 
     url:"PHP/class.ajax.php", 
     data:dataString, 
     dataType:'JSON', 
     success: function(username) { 
      alert("User is shown"); 
      user = username; 
      change_div(); 
     }, 
     error: function() { 
      alert("ERROR in show_logged_in") 
     } 
    }); 

function change_div(){ 
    $('#welcome').style.display = 'block'; 
    $('#welcome').innerHTML = "Welcome" + user + "to SIK"; 
    } 

}

來自被調用的ajax的響應僅僅是從會話變量中獲取用戶名。並且它正確返回。

當它返回時，我想讓div出現並說歡迎。但由於某些原因div未被更新。

下面是HTML：

<div id="welcome" style="display:none; postion:absolute; top:0; float:right;">...</div>

來源

2013-03-20 Tom Burman

你不能這樣做

$('#welcome').style.display = 'block'; 
$('#welcome').innerHTML = "Welcome" + user + "to SIK";

使用jQuery。這是因爲$('#welcome')你抓住了jQuery對象，而不是DOM元素。

要使用jQuery做到這一點：

$('#welcome').html('Welcome' + user + 'to SIK').show(); // Brought up in comments 

$('#welcome').show(); // Old 
$('#welcome').html('Welcome' + user + 'to SIK'); // Old

或者，如果你真的想抓住的DOM元素：

$('#welcome')[0].style.display = 'block'; 
$('#welcome')[0].innerHTML = "Welcome" + user + "to SIK";

來源

2013-03-20 11:59:36

哦確定爲什麼是它與jQuery有什麼不同？虐待現在試試這個謝謝 – 2013-03-20 12:00:34

更新，以幫助解釋更多。 '$（'＃welcome'）'是一個jQuery對象，而不是DOM元素，因此您必須使用jQuery方法對其進行更改。 – 2013-03-20 12:02:25

@TomBurman jQuery對象沒有.style，但是有'attr（'style'）' – 2013-03-20 12:02:26

@Jeff剃鬚刀是正確的，但傳遞user作爲參數change_div(user);

然後

function change_div(user){ 
     $('#welcome').show(); 
     $('#welcome').html('Welcome' + user + 'to SIK'); 
}

來源

2013-03-20 12:01:10

我假設用戶是一個全局變量，因爲他不使用'var'來聲明它。我只是假定它是在函數之外聲明的。但如果這是一個問題，這將解決它。 – 2013-03-20 12:06:56

他缺乏使用'var user ...'聲明本地「用戶」的方法在全局上下文中創建用戶屬性，因此可以解析。這就是說，這是一個更好的方法來實際做到這一點，但這不是他的問題。 – 2013-03-20 12:07:47

display屬性不存在。

$('#welcome').style.display = 'block';

使用這個代替：

$('#welcome').css({"display":"block"});

來源

2013-03-20 12:03:16 Gustav

我會堅持與此代碼純JS。

var welcome = document.getElementById('welcome'); 

function change_div(){ 
    welcome.innerHTML = "Welcome" + user + "to SIK"; 
    welcome.style.display = 'block'; 
}

來源

2013-03-20 12:05:06 Simon

是投票了最高性能的解決方案，但upvote甚至不緩存jQuery對象：P。 – Simon 2013-03-20 12:09:46

試試這個朋友。

$.ajax({ 
     type:"POST", 
     url:"PHP/class.ajax.php", 
     data:dataString, 
     dataType:'JSON', 
     success: function(username) { 
      alert("User is shown"); 
      user = username; 
      change_div(user); 
     }, 
     error: function() { 
      alert("ERROR in show_logged_in") 
     } 
    }); 

function change_div(user){ 
    $('#welcome').css("display","inline"); 
    $('#welcome').append("Welcome" + user + "to SIK"); 
    }

來源

2013-03-20 12:28:15 tamilmani

未使用javascript更新的div元素

回答

相關問題