JavascriptjQuery onclick not working

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=".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>

<!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>

Share Improve this question edited Oct 26, 2015 at 4:28 Tushar 87.2k21 gold badges163 silver badges181 bronze badges asked Aug 26, 2015 at 9:30 Marcel Wasilewski 2,6791 gold badge18 silver badges35 bronze badges

Add a comment |

4 Answers 4

Sorted by: Reset to default 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.

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

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)

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');
    });
})

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

JavascriptjQuery onclick not working - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)