Calling JavaScript function for HTML link

Question

I'm trying to use JQuery so that when the user clicks on an HTML link, a function that I write in the JavaScript file is called.

<a href="#" id="advanced_options">Show advanced options</a>

And

$(document).ready(function() {
 $("#advanced_options").click(function() {
 alert('hello');
 });
});

When I click on the link, it doesn't alert, but instead jump to another link. Why is that?

• Blender: Are you loading jQuery? Check your JS console.
• Mika H.: Yes, my console says I'm loading jQuery.
• Quentin: If you don't want the link to link to the top of the page, then don't say href="#". If you want a button that just does something with JS, and don't want to link to anything, then use an actual button and not a link.
• Mika H.: In my console, on $(document).ready(function() it says Uncaught Type Error: Object #<HTMLDocument> has no method 'ready'. But jquery.min.js is clearly loaded. What's going on?
• Mika H.: By the way, JQuery is loaded from: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Answer 1

If you're loading the link via an ajax query, so it's not on the page during the initial loading of the page use the jQuery on function: http://api.jquery.com/on/

$(document).ready(function() {
 $(document).on( 'click' , "#advanced_options" , function(event) {
 event.preventDefault();
 alert('hello');
 });
});

Answer 2

You must prevent default browser behaviour:

$(document).ready(function() {
 $("#advanced_options").click(function(event) {
 event.preventDefault();
 alert('hello');
 });
});