Динамическое добавление элемента div в jquery

Question

Я использую следующую функцию, чтобы показать сообщение о состоянии после отправки формы с моей страницы asp.net .. Функция вызывается, но она (alertmsg 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; 
} 

Answer 1

Вы предупреждаете объект jQuery. Попробуйте изменить свое оповещение: alert($alertdiv.get(0).innerText);

Кроме этого, ваш div может не отображаться, потому что вы добавляете событие click, прежде чем добавлять элемент div на страницу.

Try изменения:

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

To:

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

или даже:

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

Я думаю, что это может быть единственным способом связать динамически генерируемые элементы. Я никогда не пробовал .click() за пределами функции готовности документа.

Редактировать: В дополнение к приведенному выше предложению для jQuery, ваш css следует изменить, чтобы указать высоту для div. Ваша высота 0 приведет к тому, что она будет визуализироваться, технически и, возможно, сдвинется вверх. Но вы не сможете увидеть его, потому что он равен 0 пикселям в точке 0,0.

Answer 2

оповещения ($ alertdiv.text (сообщение)); также устанавливает текст $ alertdiv в messasge и возвращает $ alertdiv для поддержки цепочки jQuery. То, что вы ищете, это $ alertdiv.text(), который возвращает текст внутри $ alertdiv.

Кроме того, почему вы создаете этот div динамически? Есть ли причина, по которой вы не можете просто иметь ее на странице и скрывать/показывать ее с помощью slideUp()/slideDown()?

Answer 3

Чтобы вставить <div> динамически вы можете использовать этот

$('<div>Test</div>').insertAfter('.inner'); // вставить после элемента с классом внутренней

или лучше

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