jQuery doesn't seem to be working locally or on my browser

Question

I downloaded jQuery and tried to run it in sublime text editor, but it doesn't seem to be working. There are no errors in my console, so I also tried using jQuery's web address in my script tag, but that doesn't work either. Lastly, I've copied and pasted by code into a plunk and it still doesn't work in there either. Can someone take a look at this and tell me what's up? http://plnkr.co/edit/LSz4Sj35oOvHJYZ61cMr

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="circle"></div>
    <br />
    <p>Hello</p>
  </body>

</html>

**CSS**

#circle {

        height: 200px;
        width: 200px;
        border-radius: 100px;
        background-color: red;
    }

.square {

        height: 200px;
        width: 200px;
        margin-top: 10px;
        background-color: blue;
    }

**JS**

$('#circle').click(function() {

        $('p').html("the text has changed");

});

Document ready - https://learn.jquery.com/using-jquery-core/document-ready/ — Clay, Dec 01 '15 at 04:01
Possible duplicate of [Javascript Code works in jsfiddle and but not in the Browser](http://stackoverflow.com/questions/23116431/javascript-code-works-in-jsfiddle-and-but-not-in-the-browser) — Bhojendra Rauniyar, Dec 01 '15 at 04:08

score 2 · Answer 1 · answered Dec 01 '15 at 04:02

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

You need to include the ready handler. The jQuery is not executing because the DOM isn't ready for JavaScript. Wrap your code in a $document.ready() block. See this.

$(document).ready(function() {
    $('#circle').click(function() {
        $('p').html("the text has changed");
    });
});

https://learn.jquery.com/using-jquery-core/document-ready/

Nicholas Smith · Accepted Answer · 2016-12-16T07:59:31.873

1

try using this script just to make sure jquery has loaded

$(function(){
    console.log("jquery has loaded");
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Also, make sure your browser is not fire walled.

edited Dec 16 '16 at 07:59

answered Dec 01 '15 at 04:09

Nicholas Smith

674
1
13
27

jQuery doesn't seem to be working locally or on my browser

2 Answers2