Javascript link when clicked loads jQuery menu. Everything loads but doesn't execute

74 Views Asked by At

I am trying to create a bookmarklet Javascript link that when clicked it will load up a menu over the current page. So far when I click the link, all the markup html, CSS, and jQuery code loads up, however, it does not execute. In other words, the menu open button does not open the menu...

I noticed that when the code is loaded normally on a page not using the link bookmarklet, classes are dynamically added to the nav and ul li tags. This doesn't happen when the scripts and markup are loaded through the bookmarklet. Below is my code.

Bookmarklet Javascript link:

<a href="javascript:(function () { var jsCode = document.createElement('script'); jsCode.setAttribute('src', 'file:///Applications/MAMP/htdocs/laravel/public/bookmarklet/poolapp.js'); document.body.appendChild(jsCode); }());">Run Bookmarklet</a>

Script that creates the markup and adds the necessary jQuery for the menu:

(function(){    
    // the minimum version of jQuery we want
    var v = "1.7.2";

    // check prior inclusion and version
    if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
        var done = false;
        var script = document.createElement("script");
        script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
        script.onload = script.onreadystatechange = function(){
            if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
                done = true;
                initMyBookmarklet();
            }
        };
        document.getElementsByTagName("head")[0].appendChild(script);
    } else {
        initMyBookmarklet();
    }
    
    function initMyBookmarklet() {
        (window.myBookmarklet = function() {
        // JavaScript code goes here!
           
            var j = '<script type="text/javascript" src="file:///Applications/MAMP/htdocs/laravel/public/bookmarklet/bookmarklet.js"></script>'; 
     
            var k = '<script type="text/javascript" src="file:///Applications/MAMP/htdocs/laravel/public/bookmarklet/startpool.js"></script>'
     
            var y = '<a class="poolbtn" href="#poolmenu">X</a>      <nav id="poolmenu">             <ul>                <li><a href="#">Home</a></li>               <li><a href="#about">About us</a>                   <ul>                        <li><a href="#about/history">History</a></li>                       <li><a href="#about/team">The team</a>                          <ul>                                <li><a href="#about/team/management">Management</a></li>                                <li><a href="#about/team/sales">Sales</a></li>                              <li><a href="#about/team/development">Development</a></li>                          </ul>                       </li>                       <li><a href="#about/address">Our address</a></li>                   </ul>               </li>               <li><a href="#contact">Contact</a></li>             </ul>       </nav>';
     
            var b = document.createElement("div");
            b.innerHTML = j + k + y;
            document.body.appendChild(b);
            
            // STOP JAVASCRIPT BEFORE HERER
        })();
    }
})();

Startpool.js trigger

$(function() {
    $('nav#poolmenu').mmenu();
});

Could not fit the jQuery for the menu since it was to long but you can find it here. It has not been changed. http://mmenu.frebsite.nl/download.html

0

There are 0 best solutions below