Question

Line of bug is this:

contxt.replaceWith(safe_copy[id]).prepend("<span class='error'>"+jsonObj.data+"</span>");

While the replaceWith statement works just fine the data is not getting ‘prepended‘.

A more complete code:

contxt = $(this).parents('div[style^="display"]');
id = $(this).attr('id');

        $.ajax({
                url: "/submit/myposts",
                type: "POST",
                data: "action=edit&post="+$(this).attr('id').match(/[0-9]+/)[0]+"&data="+encodeURIComponent(text),
                success: function(data){
                    loading.remove();
                    jsonObj = $.parseJSON(data);

                    if(jsonObj.code == "0")
                        block.html(jsonObj.data);
                    else
                        contxt.replaceWith(safe_copy[id]).prepend("<span class='error'>"+jsonObj.data+"</span>");
                },
                error: function(){
                    loading.remove();
                    contxt.replaceWith(safe_copy[id]).prepend("<span class='error'>An error occurred. Please try again.</span>");
                }
            });

Answer 1

.replaceWith() returns the original jQuery object (the one removed from the page) so when you chain onto it, it will operate on the content that was removed, not the content that was added.

From the jQuery Doc for .replaceWith():

The .replaceWith() method, like most jQuery methods, returns the
jQuery object so that other methods can be chained onto it. However,
it must be noted that the original jQuery object is returned. This
object refers to the element that has been removed from the DOM, not
the new element that has replaced it.

I’m not entirely sure I understand your code/HTML, but this might be one possible work-around:

var newContent = $(safe_copy[id]).prepend("<span class='error'>"+jsonObj.data+"</span>");
contxt.replaceWith(newContent);