Динамическое добавление элемента 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 на страницу.

Попробуйте изменить:

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

Кому:

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

или даже:

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

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

Edit: В дополнение к приведенному выше предложению для 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>");