0

For Jquery replaceWith(newCode) method:

The new code contains a number of scripts to executed when document is ready. For example

<div>
    <script>$(function(){ foo1(); });</script>
    <script>$(function(){ foo2(); });</script>
    <script>$(function(){ foo3(); });</script>
</div>

After replaceWith(...) is called, function foo4(..) needs to execute after foo1(), foo2(), and foo3() are executed.

I tried this:

 $(".foo").replaceWith(newCode);
 $(function(){ foo4(); }

But foo4() is called before foo1, foo2, and foo3.

How to execute a function after all functions (document ready) in the replacement code are executed?

eastwater
  • 4,624
  • 9
  • 49
  • 118
  • Insert it into `newCode`. or... better yet, avoid doing this all together. – Kevin B Oct 16 '18 at 22:25
  • NO. This is just a simplified case. Just a case for searching solution. – eastwater Oct 16 '18 at 22:27
  • You can "fix" it with a setTimeout, but you won't find any non-hacky solution to your hacky problem. – Kevin B Oct 16 '18 at 22:27
  • Timeout is not reliable. Have to hate it. – eastwater Oct 16 '18 at 22:28
  • It may not be reliable, but there's no event you can wait on that makes sense for your scenario. You don't have any other real options. – Kevin B Oct 16 '18 at 22:28
  • It seems the functions in the new code are not registered with document ready when the replaceWith() is executed. – eastwater Oct 16 '18 at 22:30
  • The reason it works this way is because foo 1 2 and 3 can't run until the code that is inserting 1 2 and 3 completes, which will be *after* foo4's ready handler has been bound. So you must push the call off to the call stack in a way that guarentees it will be ran *after* 1 2 and 3 have ran. setTimeout is the only real option. – Kevin B Oct 16 '18 at 22:30
  • well, aside from not doing this (aka not using replaceWith or anything similar) at all and taking an entirely different approach. such as *not* appending html to your page that contains scripts. – Kevin B Oct 16 '18 at 22:31
  • Jquery should run the scripts inside the new code in the replaceWith(...) method. This way it would register foo1/2/3 with document ready before foo4 is registered. Do not know why jQuery does not do it this way. – eastwater Oct 16 '18 at 22:35
  • that's not how the dom works. jquery has nothing to do with why this isn't working. – Kevin B Oct 16 '18 at 22:35
  • But replaceWith is a Jquery method, right? – eastwater Oct 16 '18 at 22:37
  • Yes, it is, but all that does is use the DOM api to insert the html you've provided into the location of the old element. It isn't going to strip the code out for you and run it at a convenient time. – Kevin B Oct 16 '18 at 22:38
  • I see. Why DOM does not run the scripts inside the new code immediately after replacement is finished? When the scripts will be run? – eastwater Oct 16 '18 at 22:40
  • Javascript is single threaded. It can't run new code until existing code has finished running. – Kevin B Oct 16 '18 at 22:40
  • setTimeout would likely be more reliable than you might think in this scenario, even if it is a bit hacky. – Kevin B Oct 16 '18 at 22:43
  • Single-threading helps me understand it. Thanks. – eastwater Oct 16 '18 at 22:44
  • Even javascript is single threading, DOM API can get the scripts out from the new code and run them in the same thread. It is technically possible. right? – eastwater Oct 16 '18 at 22:48
  • Possible duplicate of [jQuery wait for replaceWith to finish before executing](https://stackoverflow.com/questions/24429210/jquery-wait-for-replacewith-to-finish-before-executing) – e_i_pi Oct 16 '18 at 23:12

0 Answers0