在jQuery中動態添加一個div元素

我使用下面的函數來顯示狀態消息後，從我的asp.net頁面提交表單。該函數被調用，但它（alertmsg div）似乎並沒有顯示爲什麼？在jQuery中動態添加一個div元素

function topBar(message) { 
     var $alertdiv = $('<div id = "alertmsg"/>'); 
     $alertdiv.text(message); 
     alert($alertdiv); 
     alert($alertdiv.text(message)); 
     $alertdiv.click(function() { 
      $(this).slideUp(200); 
     }); 
     $(document.body).append($alertdiv); 
     setTimeout(function() { $alertdiv.slideUp(200) }, 5000); 
    }

會發生什麼事是既警報報表顯示[Object object] ...我認爲雙方都需要表現出不同的輸出...任何建議..

CSS：

#alertmsg 
{ 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:135%; 
    font-weight:bold; 
    overflow: hidden; 
    width: 100%; 
    text-align: center; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: #404a58; 
    height: 0; 
    color: #FFFFFF; 
    font: 20px/40px arial, sans-serif; 
    opacity: .9; 
}

來源

2010-07-17 Chendur Pandian

一般情況下，使用'alert'是廢話調試Javascript的方法。看看[Firebug]（http://getfirebug.com/），你會更好地看到發生了什麼。 – 2010-07-17 05:17:31

你正在提醒jQuery對象。嘗試將您的提醒更改爲： alert($alertdiv.get(0).innerText);

除此之外，您的div可能未顯示，因爲您在將div元素添加到頁面之前添加了單擊事件。

嘗試改變：

$alertdiv.click(function() { 
      $(this).slideUp(200); 
     });

要：

$alertdiv.bind('click', function() { 
      $(this).slideUp(200); 
     });

甚至：

$alertdiv.live('click', function() { 
      $(this).slideUp(200); 
     });

我想這可能是綁定動態生成的元素的唯一途徑。我從來沒有嘗試.click()以外的文檔就緒功能。

編輯：除了上面的jQuery建議，你的css應該改爲指定div的高度。 0的高度會導致它在技術上渲染並可能滑動。但是，您將無法看到它，因爲它在0,0點處高度爲0像素。

來源

2010-07-17 05:14:58

警報（$ alertdiv.text（消息））;還將$ alertdiv的文本設置爲messasge並返回$ alertdiv以支持jQuery的鏈接。你要找的是$ alertdiv.text（），它會返回$ alertdiv中的文本。

另外，爲什麼你動態地創建該div？是否有任何理由，你不能只在網頁上它，並通過slideUp（）/ slideDown（）隱藏/顯示它？

來源

2010-07-17 05:12:38 Faisal

它只是一個div創建的表單提交...所以我動態地創建了它... – 2010-07-17 05:15:08

+1 .text（）'。我通常嘗試避免使用'.text（）'和'.html（）'從html元素中檢索（因此忘記它們存在），因爲它們可以很容易地更改爲返回jQuery對象的賦值函數。此外，動態添加div的一個原因是避免在屏幕閱讀器或基於文本的瀏覽器等輔助設備上進行錯誤確認。 – 2010-07-17 05:19:28

@Jim：關於屏幕閱讀器等的好處 – Faisal 2010-07-17 06:25:09

要插入<div>動態，你可以使用這個

$('<div>Test</div>').insertAfter('.inner'); //與類內的元素後插入

或更好

$("#myparent").html("<div id='mynewdiv'>hi</div>");

來源

2010-07-17 05:15:18 Starx

在jQuery中動態添加一個div元素

回答

相關問題