jQuery, and other JS not running when copied from working jsfiddle into local env?

StackOverflow https://stackoverflow.com/questions/20588562

Pergunta

Even when uploaded to my testing server and using DOM ready, scripts seem to be unresponsive. (I'm in Mavericks, Chrome).

JSFiddle example: http://jsfiddle.net/LvsYc/1361/

Would anyone mind helping me set this up? I have tried so many different variations of DOM ready and haven't had any luck. Something tells me it also has to with:

.change

I was using that in a code yesterday and it wasn't working too well either. I reseached and found:

.bind('change',function)

but my implementation didn't work with that either. Anyone got any ideas? Super annoying!

Side question: do I need to be referencing a jQuery library for functions like this or just jQueries involving like ".slide" etc? Thanks! 

<!DOCTYPE html>
<head>
  <script type="text/javascript" src="code.jquery.com/jquery-1.10.2.min.js"></script>
  <script>
    $(document).ready(function() {
      function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
          }

          reader.readAsDataURL(input.files[0]);
        }
      }
      $("#imgInp").change(function(){
        readURL(this);
      });
    });
  </script>
</head>

<body>
<form id="form1" runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="my image" />
</form>
</body>
</html>
Foi útil?

Solução

Where are you putting the js in the html page? If you look at this fiddle it doesn't work because I have selected to have the js in the head which is attaching the event to an element that doesn't exist yet.

Put the js in the body and wrap it just like John S said 

<body>
<script type="text/javascript">
  $(function() {
    // js code here
  });
</script>
</body>

Also, make sure you are including the jquery library!

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top