Change event not being added to Element

Change event not being added to Element

Hi guys, 

I have a JQuery Mobile page that's loaded using the AJAX transitions.
I have included my JS at the bottom of the page and I know it is running when the page is shown.
Inside the JS I am attaching a change event to a JQM slider element. But the event does not fire when it should. 
Also if I copy the event handler code straight out of the JS file and paste it into the chrome console the event starts working properly. I don't know what I am missing. 

Can anyone point me in the right direction?

Thanks.

JS File: 
  1. console.log("pickImage.js runnning..."); // <-- This Prints  $("#slider").bind("change", function() {       $('#cropBox').width($("#slider").val());  $('#cropBox').height($("#slider").val()); });
HTML: 
  1. <!DOCTYPE HTML> <html> <head> <title>Gadget Covers R Us</title>  </head> <body>   <div id="pickImage" data-role="page" data-add-back-btn="true">  <div class="content" data-role="content">  <div id="cropContainer">  <img id="cropImage"  src="jquery.mobile/images/Solar_eclipse_corona_node_full_image.jpg" />  <div id="cropBox"></div>  </div>   <input type="range" id="slider" data-highlight="true" value="100"  min="20" max="380" />  </div>  <script src="js/pickImage.js"></script>  </div> </body> </html>