Anfügen tun nichts

Question

Ich versuche, ein Element nach dem Entfernen eines weiteren hinzufügen:

$("a.III").click(function(e) { 
    var element = '<div class="tagul" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus"></div>'; 

    e.preventDefault(); 
    $("div.tagul").fadeOut("slow", function(e) { 
     $("div.tagul").remove(); 
     $("span.content.left").append(element); 
     $("div.tagul").fadeIn("slow"); 
    }) 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
<span class="content left" style="float: left;"> 
    <div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew"></div> 
</span> 
<span class="content" style="float: right"> 

</span> 

Nichts passiert nach dem fadeOut älteren div. Ich nehme an, dass ich etwas falsch mache, während ich versuche, das neue Element anzuhängen.

Answer 1

Ihr Code funktioniert gut, das Problem ist höchstwahrscheinlich, dass Sie keinen Inhalt in den divs haben, die Sie entfernen/anhängen, so dass Sie nicht sehen können, dass es funktioniert. Hier ist Ihr genauer Code aber mit Inhalt in dem divs so können Sie tatsächlich sehen, das Skript arbeiten (hinzugefügt, um ein anchor mit Klasse von III, die ich nehme an, Sie in Ihrem Beitrag nicht mit einberechnet):

$("a.III").click(function(e) { 
 

 
    e.preventDefault(); 
 
    
 
    var element = '<div class="tagul2" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus">Tagul 2</div>'; 
 
    
 
    $("div.tagul").fadeOut("slow", function(e) { 
 
    $("div.tagul").remove(); 
 
    $("span.content.left").append(element); 
 
    $("div.tagul2").fadeIn("slow"); 
 
    }); 
 
});

a.III { 
 
    display:block; 
 
    margin-bottom:20px; 
 
} 
 

 
.tagul2 { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="III">Click me</a> 
 

 
<span class="content left" style="float: left;"> 
 
    <div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew">Tagul</div> 
 
</span> 
 
<span class="content" style="float: right"> 
 
\t \t \t 
 
</span>

Darüber hinaus wird Ihre fadeIn() Funktion für das angefügte Element tatsächlich nichts tun, da die div standardmäßig angezeigt wird (im Wesentlichen Sie versuchen, ein Element, das bereits sichtbar ist, zu verblassen). Um es einzublenden, können Sie die Klasse des Elements, das Sie anhängen, ändern, das CSS auf display:none; setzen und dann wird das Element nach dem Anhängen eingeblendet (ich habe diese Änderung in meiner Antwort vorgenommen).