CODEWITHSUNDEEP
javascriptjquery
Nigussu Sima
Nigussu Sima

Reputation: 127

Jquery not working on external JS file

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?

Upvotes: 2

Views: 2240

Answers (2)

Pako
Pako

Reputation: 31

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.

Upvotes: 3

u-ways
u-ways

Reputation: 7784

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.

Upvotes: 3

Related Questions