Auto executing javascript code loaded dynamically

Question

Let's say i have main page:

<html>
  // Blah blah blah
  <button />
  // Blah blah blah
<script type="text/javascript">
  // Nothing here
</script>
</html>

That button on the main page open a modal with the following structure:

<div>
  <!-- HTML Stuff -->
</div>
<script type='text/javascript'>
  $(function() {
    // hide stuff, show stuff
  });
  function whatever() {
    // do some stuff
  }
</script>

This modal is loaded into my DOM.
The question is:
Why the whatever function can't be called in the context of the modal?
For example, if i had a select tag inside the modal and added an eventListener to it so that when fired, it would call the whatever function, like this:

$('#select').on('change', function() {
  whatever();
});

Or even:

<select onchange="whatever()" />

If i move the function to the main page, outside the modal it works like a charm.
Does it have something to do with the code being executed and losing all references when it is loaded dinamically?

You need to show us more...Give us an example how does it not work. — epascarello
– epascarello, Commented Feb 11, 2014 at 13:42
Why don't you call whatever() from the "load success"-hook in your loadModal-routine? — synthomat
– synthomat, Commented Feb 11, 2014 at 13:45

synthomat · Accepted Answer · 2014-02-11 13:49:23Z

2

Did you try something like this (semi-pseudo-code ;-)

Modal:

function initModal() {
    $('#select').on('change', function() {
        whatever();
    });
}

Main Page:

$.get('modal.html').success(function() {
    initModal();
});

answered Feb 11, 2014 at 13:49

synthomat

7745 silver badges11 bronze badges

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

1 Comment

MurifoX Over a year ago

That's a great solution to the problem, but what i really want is to understand why the problem happened.

Community · Accepted Answer · 2017-05-23 11:58:31Z

2

The problem is, the dynamically loaded script is executed before the html is inserted into the DOM.

Have a look on my answer to How to append javascript block in a string into html?

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Feb 11, 2014 at 13:51

metadings

3,8482 gold badges30 silver badges37 bronze badges

2 Comments

MurifoX Over a year ago

Hmm, that's good to know. So you are saying that everything would be executed and no function reference will exist if i load it like that?

metadings Over a year ago

Yes, sadly I noticed this since jQuery 1.4+ (afair) that scripts are removed and no more living in javaScript global space. So if you want to do something simple you may get away with $(document).on("change", "#select", function () { }); or a custom init that gets called in a $.get callback, but for a more general approach I made it with the style script trick/hack

Collectives™ on Stack Overflow

Auto executing javascript code loaded dynamically

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related