How to fix onclick not working using jquery in anchor tags?

Actually I want to open menu when user click on hamburger ;


here’s the html ;

<div class=" main-nav">
			<div class="ham-div"><a id="ham" ><img width="32" height="20" src="resources/icons/menu2x.png" alt=""></a></div>

and here’s the jquery script

$(document).ready(function () {
	
	$('#ham').click(function(){
		$('.hamburger-menu').toggleClass("visible");
	});
		$('.hamburger-menu').mouseleave(function(){
//			alert("leaved!");
			$('.hamburger-menu').removeClass("visible");
		});
	$("#operator").change(function(){
		if($(this).val() == '0' ){
		$('#circle').addClass('none');
			
			
		}
		else{
			$('#circle').removeClass('none');
			$('#circleSelect').trigger('focus');
		}
		

	});
});

Your code provided has no element with class “hamburger-menu”.

look up why event-listeners can’t show click on this anchor tag ?

If you want to toggle the class when clicked why have you also removed that same class when the mouse leaves? That means as soon as you move the cursor the class you just applied on click will be removed.

	/*
		$('.hamburger-menu').mouseleave(function(){
//			alert("leaved!");
			$('.hamburger-menu').removeClass("visible");
		});
		*/

Remove that section and try again.

Off topic: You shouldn’t really be using the anchor element without an href (unless you know why) as that has accessibility issues and tab issues. It probably should be a button element anyway.