在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元素

回答

相关问题