How do I extend jQuery's replaceWith function to accept a callback function?

Question

This should be easy, right? Yet I can't sem to find any examples of such a functionality anywhere. The problem is that after I do a replaceWith() I want to then do something with those elements that were written to the DOM, but if I try to do something to them right after the replaceWith() call they don't exist yet so I need to be sure the replaceWith() is completely finished. I just want something like this to work:

$('#foo').replaceWith('some text', function() {
     //do something else here
});

Thoughts?

Could you show the code that isn't working when you try to do the processing it immediately afterwards? `replaceWith` is not asynchronous, so this should work fine. *Edit* My bet is that you're trying to do something with `#foo` still, but it won't exist because you just replaced it... — lonesomeday, Jan 26 '12 at 18:08
Why do you need a callback if `replaceWith` is not asynchronous? You can call your method right away after calling `replaceWith`. — ShankarSangoli, Jan 26 '12 at 18:10
http://stackoverflow.com/questions/2465431/jquery-fadeout-replacewith-animate-almost-working http://stackoverflow.com/questions/5248721/jquery-replacewith-fade-animate — Alex, Jan 26 '12 at 19:43

score 6 · Accepted Answer · answered Jan 26 '12 at 22:03

6

You can make your own function that calls replaceWith:

$.fn.replaceWithCallback = function(replace, callback){
    var ret = $.fn.replaceWith.call(this, replace); // Call replaceWith
    if(typeof callback === 'function'){
       callback.call(ret); // Call your callback
     }
    return ret;  // For chaining
};

answered Jan 26 '12 at 22:03

gen_Eric

223,194
41
299
337

4

I know I am very late at this but might help others. This is not the right solution for this question. Although a function will be called as is one of his requirement, it can't possibly work as a callback. He mentioned clearly in his requirements that "if I try to do something to them right after the replaceWith() call they don't exist yet so I need to **be sure the replaceWith() is completely finished**". It might work as somehow replaceWith returns before the function executes, but that would be just luck. So I would recommend not to use this method to create a callback. – Jehanzeb.Malik Jan 30 '13 at 15:22
1

@Jehanzeb.Malik: `replaceWith` is synchronous. My guess is he was trying to use a cached jQuery object. Like `var $a = $('#foo'); $a.replaceWith('a');`. Trying to use `$a` won't work, as the element doesn't exist anymore. – gen_Eric Jan 30 '13 at 15:43
I had the same issue, trying this: `toUpdate.find('.inscription').replaceWith(inscription);` `initAddInscription(toUpdate.find('.inscription'));` – Viktor Oct 27 '13 at 10:35

score 0 · Answer 2 · answered Mar 21 '15 at 08:44

Create callback functionality simply by doing:

$("#myElement").replaceWith(function() {
  // call a function
);

and to replace a word and not inner html:

$("#derp").text(function(index, text) {
  // call a function here
  return text.replace('old', 'new');
});

How do I extend jQuery's replaceWith function to accept a callback function?

2 Answers2

Linked