Bug Tracker

Ticket #8289 (closed bug: invalid)

Opened 4 years ago

Last modified 3 years ago

appended <script> tag not found by jquery after successful append

Reported by: randynwalsh@… Owned by: randynwalsh@…
Priority: low Milestone: 1.next
Component: manipulation Version: 1.4.4
Keywords: Cc:
Blocking: Blocked by:

Description

If I have the following statement, which adds a function at runtime:

$('<script id="abc">function abc() {}</script>').appendTo('head');

it correctly inserts into the DOM, (Can be called), - but isn't found again by JQuery, as in:

$('#abc').html() -> returns null

Is there a way to get JQuery to recognize the new function that was added dynamically?

Thank you in advance

Change History

comment:1 follow-up: ↓ 2 Changed 4 years ago by jitter

  • Owner set to randynwalsh@…
  • Priority changed from undecided to low
  • Status changed from new to pending
  • Component changed from unfiled to manipulation

Thanks for taking the time to contribute to the jQuery project by writing a bug report.

This isn't a bug but works like this by design (and it's a fairly well known behavior of jQuery too).

I'm not sure what you are trying to say with "get JQuery to recognize the new function". Check this  test case, the code in the script tag is evaluated and after that the function is callable.


Instead of coming up with an explanation my self I quote karl swedberg:

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.

To round this up you can check the following related tickets for more info:

#1698, #3105, #6558, #8298

comment:2 in reply to: ↑ 1 Changed 4 years ago by randynwalsh@…

  • Status changed from pending to new

Replying to jitter:

Thanks jitter,

The info you sent me was good to know but didn't address the issue I was having. As you know, you can add ID attributes to TAGs and then use jQuery selectors to retrieve the tag elements. This is true of SCRIPT tags as well, when they are loaded statically. However, when you create SCRIPT tags dynamically, the jQuery selectors don't find them. I modified your test case to show you.

 http://jsfiddle.net/M57v5/

Thanks again,

Randy

Thanks for taking the time to contribute to the jQuery project by writing a bug report.

This isn't a bug but works like this by design (and it's a fairly well known behavior of jQuery too).

I'm not sure what you are trying to say with "get JQuery to recognize the new function". Check this  test case, the code in the script tag is evaluated and after that the function is callable.


Instead of coming up with an explanation my self I quote karl swedberg:

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.

To round this up you can check the following related tickets for more info:

#1698, #3105, #6558, #8298

comment:3 Changed 4 years ago by snover

  • Status changed from new to closed
  • Resolution set to invalid

As per jitter’s comment, this is by design. JavaScript is evaluated and not appended to the document when using the DOM manipulation functions. There is no purpose to adding an ID to a <script> tag since no matter what you do to it, the evaluated code will not go anywhere when the tag is changed.

Note: See TracTickets for help on using tickets.