External JQuery not working

Question

So, I have written this code in HTML and I am trying to use basic JQuery function like hide(). While the inline JQuery is working properly , the external JQuery code for the same does not work at all. Here's the code for the HTML file-

<html>
    <head>
        <script src="jq.js"></script>
        <script src="JS.js"></script>
    </head>
    <body>
        <p id='paragraph'>This is a paragraph</p>
        <p onclick="$(this).hide()">This is second</p>
    </body>
</html>

code for the jq.JS fiel which where external JQuery code is -

$('#paragraph').click(function(){
   $('#paragraph').hide();
});

Are you sure that `jq.js` is getting added to your HTML? Check the network tab. — Rahul Desai, Feb 17 '15 at 10:22
Is the path to `jq.js` correct? Is you code in `JS.js` inside a DOMReady handler? Any errors in the console? — Rory McCrossan, Feb 17 '15 at 10:23
possible duplicate of [jQuery .click() doesn't work](http://stackoverflow.com/questions/25576682/jquery-click-doesnt-work) — JJJ, Feb 17 '15 at 10:23

score 2 · Answer 1 · answered Feb 17 '15 at 10:22

Your JavaScript (because of where the <script> tags are) runs before you've added the paragraph to the DOM.

It doesn't find the paragraph (since it doesn't exist yet) so it binds your click handler to nothing.

Move the script to after the paragraph (or wrap it in a function and run that function when you get a DOMReady or load event).

score 2 · Accepted Answer · answered Feb 17 '15 at 10:24

Enclose your code in $(document).ready()

$(document).ready(function(){
    $('#paragraph').click(function(){
       $('#paragraph').hide();
    });
});

This way, the jQuery code inside will run only when the DOM is ready.

Readup: $(document).ready() | jQuery Learning Center

score 1 · Answer 3 · answered Feb 17 '15 at 10:27

You can attach it right before the so that it is ran after all the elements have been rendered.

If you structure your code correctly however the position on the page doesn't matter.

$(document).ready(function(){
   $('#paragraph').click(function(){
      $('#paragraph').hide();
   });
});

If you use the code above you can keep the reference to the js file before the head!

score 1 · Answer 4 · answered Feb 17 '15 at 10:34

1

Please check that js file is attached or not and in your code of JQUERY add this

$(document).ready(function()
{
   $('#paragraph').click(function(){
       $('#paragraph').hide();
    });
});

In this way it will run when DOM is ready

answered Feb 17 '15 at 10:34

varad mayee

619
7
19

score 0 · Answer 5 · answered Feb 17 '15 at 10:40

0

@Cerlin Boss is indeed correct:

$(document).ready(function(){
    $('#paragraph').click(function(){
        $('#paragraph').hide();
    });
});

will work - see fiddle

answered Feb 17 '15 at 10:40

mcabe

260
3
15

External JQuery not working

5 Answers5