Attach dynamically loaded javascript event handler to dynamically loaded HTML

Question

I have a site which loads content through AJAX. I need to attach onclick handler to some div which was dynamically loaded. It works fine if my event handler is already defined in my main javascript file (whether I attach it through markup via attribute onclick="myFunc" on by more pedantic addEventListener ).

However, I would like this event handler to be defined in a <script> tag of the dynamically loaded content. Then it doesn't work, whether <script>function myHandler(){}</script> is before or after the <div onclick='myHandler();'>.

I tried to attach it at the end of the XmlHttpRequest:

contentDiv.innerHTML = xhr.responseText;
var handlerName = getItFrom(xhr.responseText); 
var clickFn = window[handlerName];
loadedDiv.addEventListener('click', clickFn);

Doesn't work neither: handlerName is correct, but clickFn remains undefined...

I prefer a pure js answer but jquery is ok if I can easily translate it.

Where's `window[handlerName]` been defined and where's `loadedDiv` been defined? — Kosh, Jul 06 '17 at 03:03
no one codes front end this way anymore :( but if you have to then assign an id to
and then handle the on load event by attaching an event listener to your html element... or you can pick up webpack and react and make your life easier — Dmitry Matveev, Jul 06 '17 at 03:05
@Kosh `window[handlerName]` is just a way to get a function object by its name. If handlerName was defined in the main javascript that would work. `loadedDiv` is of course given through a `document.getElementById`. I just skipped those details as they are irrelevant. — SoyonsPrecis, Jul 06 '17 at 03:15
@Dmitry it is exactly the same problem: if the onload event listener is sent through the dynamic content, it doesn't work. — SoyonsPrecis, Jul 06 '17 at 03:26
@James Thanks! I missed this post. So, it doesn't work, period. It seems the only solution is to load the script as a file but cannot be included in the innerHTML. — SoyonsPrecis, Jul 06 '17 at 03:30

Kosh · Answer 1 · 2017-07-06T04:22:28.203

0

If getItFrom(xhr.responseText); returns a function defined in the global scope try to add quotes like this:

var clickFn = window['handlerName'];

Because console says:

var luck = function(){}; window[luck];
> undefined
var luck = function(){}; window['luck'];
> function luck()

edited Jul 06 '17 at 04:22

answered Jul 06 '17 at 03:27

Kosh

16,966
2
19
34

Thanks for trying. However handlerName is already a string. Anyway it is not feasible as indiacted in this answer: [link]https://stackoverflow.com/questions/4619668/executing-script-inside-div-retrieved-by-ajax unless getting the script from an external link. – SoyonsPrecis Jul 06 '17 at 04:12
Could you please let me know what that string contains? – Kosh Jul 06 '17 at 04:20

score 0 · Answer 2 · answered Jul 06 '17 at 03:54

It's doable if you're willing to use jQuery, here I assign an event handler from a script tag of a html string. A couple of things, the parameter you pass into .html has to be a jQuery object of your string, and you'll need to replace </script> with <\/script> within the string (could use .replace).

$('#content').html($("<span>before</span><script>$('#testo').click(function () { alert('infunc');});<\/script><span>after</span>"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content'></div>
<button id='testo'>Click</button>

Thanks. I believe internally jQuery is grabing the script text and using eval (?). Anyway I can't use this solution. Finally I decided to do what I already do: predefining all the scripts in my main javascript file. — SoyonsPrecis, Jul 06 '17 at 04:16

Attach dynamically loaded javascript event handler to dynamically loaded HTML

2 Answers2