javascript execution after dom insert

Question

I have a javascript code and I couldn't understand that how it is executed after inserted to dom with jquery.

Also is domready event is triggered after a dom append|insert operation? It couldn't be happen but how this code is working if its not?

 function insert() {
     var data = '<script type="text/javascript">  $(function(){ alert("insert"); });<\/script>';
     $("#example").html(data);
 }

 $(function () {
     //If domready is triggered with the .html() method why this is not executed second time?
     alert('ready');
 });

JsFiddlle link

i think jquery trigger ready handler on added content. Once fired, it maybe unbind/remove it. I will try to check it. That would explain btw why you cannot trigger document ready event — A. Wolff
– A. Wolff, Commented Jun 20, 2013 at 14:46
This is part of jquery's source code: jQuery( document ).trigger("ready").off("ready"); So, once a ready event is fired, it is unbound — A. Wolff
– A. Wolff, Commented Jun 20, 2013 at 14:52
@roasted, thanks for your answer. If jquery unbind the event after fired how the "alert("insert");" code is executed after insert. It is inside the jquery ready method? — Yucel
– Yucel, Commented Jun 20, 2013 at 15:28
i mean its unbind previous handler not next binded handlers. It looks like the 'one' method — A. Wolff
– A. Wolff, Commented Jun 20, 2013 at 15:31
ahh, yes you are right I couldn't realize your passed code first. thanks this clarify why alert(''ready'') isn't run twiced. Also what I think that $(function(){ alert("insert"); }) this code block isn't executed through ready event. It is executed differently, am I right? — Yucel
– Yucel, Commented Jun 20, 2013 at 15:36

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

See the second quoted block for this ansewer https://stackoverflow.com/a/3603496/81053

All of jQuery's insertion methods use a domManip function internally to clean/process elements before and after they are inserted into the DOM. One of the things the domManip function does is pull out any script elements about to be inserted and run them through an "evalScript routine" rather than inject them with the rest of the DOM fragment. It inserts the scripts separately, evaluates them, and then removes them from the DOM.

I believe that one of the reasons jQuery does this is to avoid "Permission Denied" errors that can occur in Internet Explorer when inserting scripts under certain circumstances. It also avoids repeatedly inserting/evaluating the same script (which could potentially cause problems) if it is within a containing element that you are inserting and then moving around the DOM.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 20, 2013 at 14:48

Chris Moutray

18.4k7 gold badges49 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yucel Over a year ago

thanks Chris, this is a good answer for the problem, but still I couldn't understand that how code "$(function(){}" inside this is executed.

Chris Moutray Over a year ago

@Yucel if you try the following code an alert is shown eval('$(function(){ alert("insert"); });'); - so jquery runs the script blocks using eval() right?

Collectives™ on Stack Overflow

javascript execution after dom insert

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related