How do I get jQuery to load when clicking a button?

Question

How do i get jQuery to load once I click on the button. So far it loads when the page is loading. I want it to load after clicking the button! i tried a lot of things and they haven't worked so far please help...

this my code so far for it

<a href="#image_link" title="PutLockerMedia" id="click">watch</a>
<div style="display:none">
  <div id="image_link">
    <div class="imageWrapper">
      <div class="image"> 
    <iframe src="http://www.putlocker.com/embed/E25FA20CE8643E5F" width="600" height="360" frameborder="0" scrolling="no"></iframe>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
   $(document).ready(function(){
      $("#click").fancybox({'scrolling': 'no','titleShow': false,'onClosed':
         function(){$("#login_error").hide();}});
   });
</script>

Answer 1

If you want to dynamically load jQuery on your button click (it would help if you explained "why" you want to do that), then you can use a function like this to load it:

function loadScript(sScriptSrc, oCallback) {
    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = sScriptSrc;
    // most browsers
    oScript.onload = oCallback;
    // IE 6 & 7
    oScript.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            oCallback();
        }
    }
    oHead.appendChild(oScript);
}

Note that your other jQuery code can't be run until AFTER jQuery is loaded. Your code could look like this:

<a href="#image_link" title="PutLockerMedia" id="click">watch</a>
<div style="display:none">
  <div id="image_link">
    <div class="imageWrapper">
      <div class="image"> 
    <iframe src="http://www.putlocker.com/embed/E25FA20CE8643E5F" width="600" height="360" frameborder="0" scrolling="no"></iframe>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
function loadScript(sScriptSrc, oCallback) {
    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = sScriptSrc;
    // most browsers
    oScript.onload = oCallback;
    // IE 6 & 7
    oScript.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            oCallback();
        }
    }
    oHead.appendChild(oScript);
}
function jQueryLoaded() {
      $("#click").fancybox({'scrolling': 'no','titleShow': false,'onClosed':
         function(){$("#login_error").hide();}});
   });
}

document.getElementById("myButton").addEventListener("click", function() {
    // load jQuery and when it's loaded, call jQueryLoaded
    loadScript("jquery.js", jQueryLoaded);
}, false);

</script>

Other reference answers:

How to know if JQuery has finished loading

Javascript multiple Dynamic Insertion

Answer 2

Try this

<script type="text/javascript"> 
    $(document).ready(function(){ 
         $("#click").click(function fancybox(){
                          'scrolling': 'no',
                          'titleShow': false,
                          'onClosed': function(){
                                         $("#login_error").hide();
                                      }
         }); 
    }); 
</script>