Wie füge ich ein DOM-Element mit jQuery hinzu?

Question

Ich habe eine funciton, die ich zur Zeit ein versteckten div.a_type

Wie kann ich diesen Code ändern, so zu zeigen, bin mit, dass statt in der versteckten div von Fading, ich die neue div auf das DOM

hinzufügen

 
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, jetzt, ich habe diese aussortiert, habe ich eine Frage,

ich habe eine andere Funktion, die eingefügten divs entfernt, wenn eine Schaltfläche geklickt wird. Es funktioniert jetzt nicht, dass die zusätzlichen divs beim Laden der Seite nicht in das dom geladen werden. Wie kann ich die Funktion auslösen, um diese jetzt zu entfernen?

jQuery (function() {// Antwort ausblenden

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

Wie wäre es mit dem Hinzufügen nach dem letzten Div.

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

bearbeiten
Sie die Informationen über einen AJAX-Aufruf erhalten kann somefile.php sollte somefile dann wieder den Inhalt, den Sie in den div wollen:

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

Somefile.php sollte so etwas wie dieses:

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

bearbeitenGut , versuchen Sie dies:

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

}); 

}); 

Gerade in der AJAX mischen, wenn Sie noch brauchen.

Answer 2

Ich habe eine andere Funktion, die die eingefügten divs entfernt, wenn eine Schaltfläche geklickt wird. Es funktioniert jetzt nicht, dass die zusätzlichen divs beim Laden der Seite nicht in das dom geladen werden. Wie kann ich die Funktion auslösen, um diese jetzt zu entfernen?

Sie haben drei Möglichkeiten, um Ihr neuestes Problem zu lösen.

1. Sie liveQuery verwenden könnten, eine jQuery-Plugin, das neu gilt für DOM-Elemente Event-Handler, wenn sie hinzugefügt werden. Hinweis: Dieses Plugin ist nur wirksam, wenn Sie native jQuery DOM Funktionen zum Anhängen/Voranstellen verwenden (append/prepend/after/before/insertBefore/insertAfter usw.).

2. Alternativ können Sie einfach die Handler wieder, wenn neue Elemente hinzugefügt werden, manuell ... (nicht die beste Option)

3. Der dritte, und meiner Meinung nach die beste Option ist die brachiale zu nutzen Macht der Ereignisdelegierung.Sie fügen einem Event-Handler einen beliebigen Event-Handler hinzu. Wenn Sie zum Beispiel Listenelemente dynamisch zu einer ungeordneten Liste hinzufügen, anstatt Event-Handler für jedes hinzugefügte Element erneut anzuwenden, können Sie einfach den Event-Handler anhängen an die Eltern und dann das Ziel der Veranstaltung:

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