Javascript/jQuery onclick not working

前端未结

关注

 4  1136

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 a

相关标签:

4条回答

长情又很酷

2020-12-02 01:17
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
1. Wrap your code in ready() callback, so that your code will be executed when DOM is finished loading
2. 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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

没有蜡笔的小新

2020-12-02 01:23

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

0 讨论(0)

说谎

2020-12-02 01:24

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

情深已故

2020-12-02 01:34

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)

0 讨论(0)