JS not applied for dynamically generated HTML

Question

I m using www.redips.net/ for drag/drop of objects its same as jquery but problem is that if I put everything as Static HTML then it working fine.If I generate dynamically HTML (which is must) then one of js library redips-drag-min fails to apply & drag-drop not working.

I found one solution to add reference to that js dynamically after all HTML has been created like this

        var ssioCss = document.createElement("script");
        ssioCss.setAttribute("type", "text/javascript");
        ssioCss.setAttribute("src", "../redips-drag-min.js");
        document.head.appendChild(ssioCss);

one of the css file works this way & its great but why not the JS file can anybody help ?? Thanks

Answer 1

As you specify JQuery in your tags, you should use

1. append, or before or after method to create elements in your page
2. getScript to load your script

3. Use this script to load external CSS file

   $("<link/>", {
     rel: "stylesheet",
     type: "text/css",
     href: "/styles/yourcss.css"
   }).appendTo("head");
   

Answer 2

You can use .getScript() for loading the external js dynamically:

$.getScript("../redips-drag-min.js", function(data, textStatus, jqxhr) {
   console.log(data);
});