Jquery not working on external JS file

Question

I have a custom dropdown menu that works perfectly fine when I add the script on the main html file but when i link it from an external JS file, the function seems to act faulty. It is not showing output.

This is the Script

$('.tc-navigation > a').click(function() {   
    var element = $(this).parent('li');
    element.children('ul').toggleClass('toto');
    return false;
});
$(document).click(function() {
    $('.tc-navigation > li > ul').removeClass('toto');
});

Do Jquery functions like parent(), children(), siblings() stuff like that work on an external JS file? If not, is there a way to make them work?

The name of the file is external.js. It is situated in js folder. — Nigussu Sima
– Nigussu Sima, Commented Aug 18, 2018 at 0:00

u-ways · Accepted Answer · 2018-08-18 00:00:15Z

3

Are you loading your JavaScript file before the DOM is rendered?

Try the defer attribute:

<script src="js/external.js" defer></script>

defer:

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

answered Aug 18, 2018 at 0:00

u-ways

8,2826 gold badges41 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johannes · Accepted Answer · 2018-08-18 00:01:24Z

3

You need to load first jQuery, later your functions. With jQuery you can wait until the dom is loaded and rendered also.

parent(), children(), siblings() functions will work fine in an external file.

edited Aug 18, 2018 at 0:01

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

answered Aug 17, 2018 at 23:56

Pako

313 bronze badges

Collectives™ on Stack Overflow

Jquery not working on external JS file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related