Uncaught TypeError: undefined is not a function(anonymous function)

I'm trying to implement the SimpleModal (http://www.ericmmartin.com/projects/simplemodal/). However, I'm getting a strange error. Which I can't fix but hopefully you guys can. And if you can explain why, great.

I've did some debugging. And https://example.com/scripts/sm.js is correct and loaded. (exactly the same as: https://simplemodal.googlecode.com/files/jquery.simplemodal-1.4.4.js)

            $("body").append("<script type=\"text/javascript\" src=\"https://example.com/scripts/sm.js\"></script>");
            $("body").append("<style>#basic-modal-content{display:none}#simplemodal-overlay{background-color:#000}#simplemodal-container{height:360px;width:600px;color:#bbb;background-color:#333;border:4px solid #444;padding:12px}#simplemodal-container .simplemodal-data{padding:8px}#simplemodal-container code{background:#141414;border-left:3px solid #65B43D;color:#bbb;display:block;font-size:12px;margin-bottom:12px;padding:4px 6px 6px}#simplemodal-container a{color:#ddd}#simplemodal-container a.modalCloseImg{background:url(../img/basic/x.png) no-repeat;width:25px;height:29px;display:inline;z-index:3200;position:absolute;top:-15px;right:-16px;cursor:pointer}#simplemodal-container h3{color:#84b8d9}</style>");
            $("body").append("<div id=\"basic-modal-content\"><h3>Basic Modal Dialog</h3><p>For this demo, SimpleModal is using this \"hidden\" data for its content. You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p><p>Examples:</p><p><code>$('#basicModalContent').modal();// jQuery object - this demo</code></p><p><code>$.modal(document.getElementById('basicModalContent'));// DOM</code></p><p><code>$.modal('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt;elements&lt;/p&gt;');// HTML</code></p><p><code>$('&lt;div&gt;&lt;/div&gt;').load('page.html').modal();// AJAX</code></p><p></p></div>");

            $('#basic-modal-content').modal();

What am I doing wrong?