Applying javascript to a dynamically added element

Question

I've searched other articles and jQuery documentation, but have not quite found (or understood) the solution I need.

I'm including Sharing buttons on our site using another online service. The procedure is to add a snippet of HTML (a closed with a specific class name) and include a call to their Javascript file.

<div class="specific_class_name"></div>

<script type="text/javascript" src="path to script.js#pubid=my-account-id" async="async"></script>

This works well on pages for which I have access to edit HTML and include scripts.

My challenge is how to include the Share buttons on pages for which I only have access to run Javascript and not to include specific HTML. I can add the closed element using jQuery .append and include the Javascript call, but this does not work as needed. If I inspect the page after it is fully loaded, I see that the dynamic element has been added correctly and the script has been called. Viewing the Page Source, the is not present.

Of course, I have no means of editing this service's script. I need the called script to find the dynamic element either during or following page load, not following any user / mouse action.

Thanks for any feedback.

It is not clear what exactly you're asking for help with. You seem to know that you can add dynamic elements with .append(). So, what else do you need? — jfriend00
– jfriend00, Commented Nov 24, 2014 at 15:27
The "View Source" is what is sent from the server. You can use the developer tools to inspect the document. — epascarello
– epascarello, Commented Nov 24, 2014 at 15:30
I'm successfully adding the dynamic element using .appendTo. What's needed is how to get the script to 'see' the new element in order to apply any functions to it. The 'View Source' as you said is from the server, before any dynamic elements are applied. I think this is what the script is 'reading' and thus not applying the function because it does not read the element with the corresponding 'class_name'. I'm using Firefox's Inspector to see where the dynamic element has been appended. — John D.
– John D., Commented Nov 24, 2014 at 16:17
I started to dissect some of the scripts to find a way to make it work, but have opted instead to use another service I found which allows me to add buttons to the page via JavaScript only. Thanks all for your feedback and time. — John D.
– John D., Commented Nov 25, 2014 at 14:50

BReal14 · Accepted Answer · 2014-11-24 15:27:38Z

1

Create the div and then use the getScript command to include it like:

$(window).on('load', function(){
  $('<div class="class_name"></div>').appendTo("someIDyouhave");
  $.getScript('path to script.js#pubid=my-account-id');
});

http://api.jquery.com/jquery.getscript/

answered Nov 24, 2014 at 15:27

BReal14

1,5841 gold badge13 silver badges35 bronze badges

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

2 Comments

John D. Over a year ago

Tried a variant of this and tried again just now; thanks. Same results. <div> is appended to the parent <div>, script loads, but does not 'see' the appended <div> and does not add the button to the site.

BReal14 Over a year ago

It's possible the service isn't designed to hook to DOM-added markup (through delegated events- see: api.jquery.com/on ) You may need to re-attach the handler to the script AFTER the load of the script. Without seeing the service code of how it appends to that div, it's impossible to say exactly what you need to do, but most likely involves re-creating the append() or .html() loading into that div, which could be messy.

Gary Storey · Accepted Answer · 2014-11-24 15:27:52Z

0

Have you tried something like this? Append the element and then add a click event?

$(function() {
  var appendedElement = $('<div id="myID"></div>')
  $('.specific_class_name').append(appendedElement).on('click', '#myID', function(){
    whatever();
  });
});

This should work.

answered Nov 24, 2014 at 15:27

Gary Storey

1,7822 gold badges15 silver badges19 bronze badges

3 Comments

A. Wolff Over a year ago

Then would be quite better to delegate event instead

John D. Over a year ago

Tried this: ` $(function() { var appendedElement = $('<div class="specific_class_name"></div>') $('.parent-div').append(appendedElement).on('click', '.parent-div', function(){ $.getScript('path to script.js#pubid=my-account-id'); }); }); ` Same results. Shouldn't the function execute automatically using action besides 'click' which is user initiated? Thanks.

Gary Storey Over a year ago

@JohnD. Whether it executes are not is entirely dependent on the code in the script file. The getscript method does have a callback function that you can use to execute a function immediately after the script file has been loaded. $.getScript('path to script.js#pubid=my-account-id', function() { callmyfunction(); });

Collectives™ on Stack Overflow

Applying javascript to a dynamically added element

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related