Comment ajouter un élément DOM avec jQuery?

Question

J'ai un funciton que j'utilise actuellement pour montrer un div.a_type caché

Comment puis-je modifier ce code afin qu'au lieu de la décoloration dans le div caché, je peux ajouter la nouvelle div au DOM

 
jQuery(function(){ // Add Answer 

    jQuery(".add_answer").click(function(){ 
     if(count >= "4"){ 
     alert('Only 4 Answers Allowed'); 
     }else{ 
     var count = $(this).attr("alt"); 
     count++; 
     $(this).parents('div:first').find('.a_type_'+count+'').fadeIn(); 
     $(this).attr("alt", count); 
    } 

    }); 

}); 

---

Ok, maintenant que j'ai ce réglé, j'ai une question,

J'ai une autre fonction qui supprime les dIV insérés si un bouton est cliqué. Cela ne fonctionne pas maintenant que les divs supplémentaires ne sont pas chargés dans le dom sur pageload. Comment puis-je déclencher la fonction pour les supprimer maintenant?

jQuery (function() {// Cacher la réponse

jQuery(".destroy_answer").click(function(){ 
    $(this).parents("div:first").fadeOut(function(){ $(this).remove() }); 
    var count = $(this).parents('div:first').parents('div:first').find('.add_answer').attr("alt"); 
    count--; 
    $(this).parents('div:first').parents('div:first').find('.add_answer').attr("alt", count); 

}); 

});

Answer 1

Que diriez-vous de l'ajouter après la dernière div.

$('.a_type:last').insertAfter('<div class="a_type">content</div>'); 

modifier
Vous pouvez obtenir les informations par le biais d'un appel AJAX à somefile.php, somefile doit alors retourner le contenu que vous voulez dans la div:

$.get('path/to/somefile.php', function(data){ 
$('.a_type:last').insertAfter('<div class="a_type">' + data + '</div>'); 
}); 

somefile.php devrait être quelque chose comme ceci:

<?php 
session_start(); 
$sessiondata = $_SESSION['data']; 
echo "Whatever you type here will come inside the div bla bla $sessiondata"; 
?> 

modifier
Ok, essayez ceci:

 
jQuery(function(){ // Add Answer 

jQuery(".add_answer").click(function(){ 
    if(count >= "4"){ 
    alert('Only 4 Answers Allowed'); 
    }else{ 
    var count = $(this).attr("alt"); 
    count++; 
    $('.a_type_'+count-1+'').insertAfter(' 
     Place content back here'); 
    $(this).attr("alt", count); 
} 

}); 

}); 

Il suffit de mélanger dans le AJAX si vous avez encore besoin.

Answer 2

J'ai une autre fonction qui supprime les div insérés si un bouton est cliqué. Cela ne fonctionne pas maintenant que les divs supplémentaires ne sont pas chargés dans le dom sur pageload. Comment puis-je déclencher la fonction pour les supprimer maintenant?

Vous avez trois options pour résoudre votre problème le plus récent.

1. Vous pouvez utiliser liveQuery, un plugin jQuery qui présente une nouvelle demande des gestionnaires d'événements aux éléments DOM lorsqu'ils sont ajoutés. Note: ce plugin ne sera efficace que si vous utilisez les fonctions d'ajout/de préfixage natif de jQuery DOM (append/prepend/after/before/insertBefore/insertAfter etc.).

2. vous pouvez pourrez aussi simplement réappliquer les gestionnaires lorsque de nouveaux éléments sont ajoutés manuellement ... (pas la meilleure option)

3. Le troisième, et à mon avis, la meilleure option est d'utiliser l'impressionnant pouvoir de délégation d'événement.Ce que vous faites est attacher un gestionnaire d'événement à n'importe quel parent, par exemple si vous allez ajouter dynamiquement des éléments de liste à une liste non ordonnée, au lieu de réappliquer continuellement des gestionnaires d'événements à chaque élément ajouté, vous pouvez simplement attacher le gestionnaire d'événements au parent puis trouver la cible de l'événement:

   $('ul').click(function(e){ 
       var target = e ? e.target : window.event.srcElement; 
       if(target.nodeName.toLowerCase() === 'li') { 
        // Do Stuff... 
       } 
   })