ajoutant Dynamiquement un élément div dans jquery

Question

J'utilise la fonction suivante semble afficher un message d'état après un envoi du formulaire de ma page asp.net .. La fonction est appelée, mais il (alertmsg div) ne pas montrer pourquoi ?

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); 
    } 

Qu'advient est à la fois les déclarations d'alerte montrent [Object object] ... Je pense que les deux ont besoin de montrer différentes sorties ... Toute suggestion ..

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

Vous êtes alertant l'objet jQuery. Essayez de modifier votre alerte pour: alert($alertdiv.get(0).innerText);

À part cela, il est possible que votre div ne s'affiche pas car vous ajoutez l'événement click avant d'ajouter l'élément div à la page.

Essayez de changer:

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

Pour:

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

ou même:

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

Je pense que cela peut être la seule façon de lier des éléments générés dynamiquement. Je n'ai jamais essayé .click() en dehors de la fonction de document prêt.

Edit: Outre la suggestion ci-dessus pour jQuery, votre css devrait être modifiée pour indiquer une hauteur de la div. Votre hauteur de 0 l'amènera à rendre, techniquement, et éventuellement glisser vers le haut. Mais, vous ne serez pas en mesure de le voir, car il est 0 pixels de hauteur au point 0,0.

Answer 2

alerte ($ alertdiv.text (message)); est également en train de mettre le texte de $ alertdiv à messasge et de renvoyer $ alertdiv afin de supporter le chaînage de jQuery. Ce que vous cherchez est $ alertdiv.text(), qui retournerait le texte dans $ alertdiv.

Aussi, pourquoi créez vous que div dynamique? Y at-il une raison pour laquelle vous ne pouvez pas l'avoir sur la page et la masquer/montrer via slideUp()/slideDown()?

Answer 3

Pour insérer un <div> dynamiquement vous pouvez utiliser cette

$('<div>Test</div>').insertAfter('.inner'); // insérer après un élément avec une manière générale, la classe intérieure

ou mieux

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