Javascript/jQuery onclick not working

Question

i made a test.html document to test a script. Somehow it is not working and i can't get why nothing is happening. The Script is in -tags and wrapped with -tag and the css also has it´s -tags. Why shouldn't it work? Here is the code

<!DOCTYPE html>
<html>

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
        </script>
        <script>
        $('#menu li a').on('click', function() {
            $('li a.current').removeClass('current');
            $(this).addClass('current');
        });
        </script>
        <style>
        .current {
            text-decoration: underline;
        }

        ul {
            list-style-type: none;
        }

        a {
            text-decoration: none;
        }
        </style>
    </head>

    <body>
        <div id="menu">
            <ul>
                <li><a id="about-link" class="current" href="#">ABOUT</a></li>
                <li><a id="events-link" href="#">EVENTS</a></li>
                <li><a id="reviews-link" href="#">REVIEWS</a></li>
                <li><a id="contact-link" href="#">CONTACT</a></li>
            </ul>
        </div>
    </body>

</html>

Tushar · Accepted Answer · 2015-09-02 05:50:11Z

12

Because your code for binding event handler is executed before the elements is present in DOM, the event is not bound on the element.

To solve this problem, you can either

Wrap your code in ready() callback, so that your code will be executed when DOM is finished loading
Move your script to the end of <body>, so all the elements are present in DOM and you can bind the events on it

Code:

$(document).ready(function () {
    $('#menu li a').on('click', function () {
        $('li a.current').removeClass('current');
        $(this).addClass('current');
    });
});

EDIT

You can also use load(not recommended) event callback to bind the event, but this will wait for all the resources to load completely.

If you want to use Vanilla Javascript, you can use DOMContentLoaded event on document.

edited Sep 2, 2015 at 5:50

answered Aug 26, 2015 at 9:31

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

2 Comments

iCollect.it Ltd Over a year ago

Note: The past-tense of bind is bound (not binded). i.e. "the event is not bound on the element"

iCollect.it Ltd Over a year ago

Better. That seems to be the most common grammatical error on SO :) +1 for also suggesting you can simply move the code to after the elements.

atinder · Accepted Answer · 2015-08-26 09:32:10Z

8

you are executing the code before the DOM content is loaded. Place your code in a ready block.

answered Aug 26, 2015 at 9:32

atinder

2,09014 silver badges15 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

Or simply place the code after the elements it references... (end of body being the most common place)

Community · Accepted Answer · 2017-05-23 11:44:46Z

You are executing the JavaScript before the <body> tag loads, which contains your <li> elements.

To solve this problem, you have three choices :

1.You can insert the JavaScript code you have written inside a $(document).ready() callback. (see http://www.w3schools.com/jquery/event_ready.asp for more information)

Code :

$(document).ready(function () {
$('#menu li a').on('click', function () {
    $('li a.current').removeClass('current');
    $(this).addClass('current');
  });
});

2.You can use the JavaScript's built in window.onload function. (see https://thechamplord.wordpress.com/2014/07/04/using-javascript-window-onload-event-properly/ for more information)

Code:

window.onload = function () {
$('#menu li a').on('click', function () {
    $('li a.current').removeClass('current');
    $(this).addClass('current');
  });
}

3.Place your <script> tag before </body> tag in your page.

Code:

<head>
    <style>
    .current {
        text-decoration: underline;
    }

    ul {
        list-style-type: none;
    }

    a {
        text-decoration: none;
    }
    </style>
</head>

<body>
    <div id="menu">
        <ul>
            <li><a id="about-link" class="current" href="#">ABOUT</a></li>
            <li><a id="events-link" href="#">EVENTS</a></li>
            <li><a id="reviews-link" href="#">REVIEWS</a></li>
            <li><a id="contact-link" href="#">CONTACT</a></li>
        </ul>
    </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script>
    <script>
    $('#menu li a').on('click', function() {
        $('li a.current').removeClass('current');
        $(this).addClass('current');
    });
    </script>
</body>

Note: Using $(document).ready() is a better option than using window.onload. (see window.onload vs $(document).ready() for more information)

Pang · Accepted Answer · 2015-09-10 10:23:07Z

0

Your code is fine. Just wrap it in DOM ready and you are good to go.

$(document).ready(function(){
    $('#menu li a').on('click', function() {
        $('li a.current').removeClass('current');
        $(this).addClass('current');
    });
})

edited Sep 10, 2015 at 10:23

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Sep 10, 2015 at 7:12

Deepak Sabharwal

91 silver badge10 bronze badges

Collectives™ on Stack Overflow

Javascript/jQuery onclick not working

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related