Cant trigger onclick event in jquery

Question

I can't toggle a div's class on clicking it in jquery

Expected Behavior : I want to add the close class to the hamburger menu so that it becomes a cross on clicking and want to display an overlay for mobile screens, but currently I just want to figure out how to trigger this onclick event.

Here's the code I am using to do so:

$("#mobile-menu").click(function() {
  $(".icon").toggleClass("close");
  var x = document.getElementsByClassName("overlay")[0];
  if ($(".icon").hasClass("close")) {
    x.style.display = "block";
    $("body").addClass("modal-open");
  } else {
    x.style.display = "none";
    $("body").removeClass("modal-open");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mobile-menu">
  <div class="icon">
    <span class="line top"></span>
    <span class="line middle"></span>
    <span class="line bottom"></span>
  </div>
</div>

.line {
    position: absolute;
    height: 4px;
    width: 100%;
    background-color: black;
    border-radius: 30%;
    transition: cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
  }
  .icon.close .top {
    transform: rotate(45deg);
    top: 48%;
  }
  .icon.close .middle,
  .icon.close .bottom {
    transform: rotate(-45deg);
    top: 48%;
  }

I made you a snippet. Please update with relevant script, CSS and HTML that is visible — mplungjan
– mplungjan, Commented May 18, 2020 at 9:16
Your overlay class and its related div does not exist in your provided example. — SMAKSS
– SMAKSS, Commented May 18, 2020 at 9:17
It's not really clear what you're asking. "how to trigger onclick?" seems to be it, but then there's more comments about overlay/hamburger that may just be there for background / more info and "I can't toggle by clicking" which is not related to "trigger". Assuming you want to trigger the click [from code], you would use $("#mobile-menu").cick(); or the longer $("#mobile-menu").trigger("click");. If this is not the case (and it probably isn't) please clarify your question and title so it's clear what you are asking. — fdomn-m
– fdomn-m, Commented May 18, 2020 at 9:25
Sorry I think I added a lot of info the question , I just need to change the hamburger menu to a cross when I click it , and also display a hidden div(.overlay) , I updated the code with the stuff related to changing the hamburger icon. — ssomename
– ssomename, Commented May 18, 2020 at 9:41

Rishu Ranjan · Accepted Answer · 2020-05-18 10:40:51Z

1

It looks like your element is not getting binded to the click function. You need to use document.ready to check the readiness and bind event.

Below is the working code snippet:

$(document).ready(function(){

  $("#mobile-menu").click(function() {
    $(".icon").toggleClass("close");
    var x = document.getElementsByClassName("overlay")[0];
    if ($(".icon").hasClass("close")) {
       x.style.display = "block";
       $("body").addClass("modal-open");
     } else {
       x.style.display = "none";
       $("body").removeClass("modal-open");
     }
  });
});

answered May 18, 2020 at 10:40

Rishu Ranjan

5944 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

Cant trigger onclick event in jquery

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related