问题:

I am loading all of the below libraries and files, but for some reasons only the CSS is executing and none of the external js files. The scripts.js file holds all of my jQuery and it seems to be formatted properly. I'm not sure why the CSS would execute, but not the jQuery.

In chrome dev tools, everything below is loaded.

<head>     <!DOCTYPE html>     <meta charset=utf-8 />     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">     <link rel="stylesheet" href="{{ url_for('static', filename='css/spectrum.css') }}">     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>     <script type="text/javascript" src="{{ url_for('static', filename='scripts/spectrum.js') }}"></script>     <script type="text/javascript" src="{{ url_for('static', filename='scripts/scripts.js') }}"></script> </head>

This is a portion of the scripts.js file:

$("span.output").draggable({     stop: function(event, ui) {} });  $('input[type=file]').change(     function() {         $('#submitbutton').click();     });  $("#text_submit").submit(     function(event) {         $("#text1").html($("#1").val());         $("#text2").html($("#2").val());         $("#text3").html($("#3").val());         $("#text4").html($("#4").val());         $("#text5").html($("#5").val());         $("#text6").html($("#6").val());         $("#text7").html($("#7").val());         $("#text8").html($("#8").val());         $("#text9").html($("#9").val());         $("#text10").html($("#10").val());         $("#slider1").show();         $("#slider2").show();         $("#slider3").show();         $("#slider4").show();         $("#slider6").show();         $("#slider7").show();         $("#slider8").show();         $("#slider9").show();          event.preventDefault();     });

回答1:

You need to put your code inside script.js in JQuery's Dom Ready function, like this;

$(document).ready(function(){     // Your code here });

For more info, http://api.jquery.com/ready/

回答2:

Try the below, not declaring type="text/javascript" in your jquery loading way might also be an issue.

<head>     <!DOCTYPE html>     <meta charset=utf-8 />     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">     <link rel="stylesheet" href="{{ url_for('static', filename='css/spectrum.css') }}">     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">     <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>     <script type="text/javascript" src="scripts/spectrum.js"></script>     <script type="text/javascript" src="scripts/scripts.js"></script> </head>

转载请标明出处:External JS/jQuery files are loading but not executing

文章来源: External JS/jQuery files are loading but not executing

标签

jquery

css

脚本