Jquery click event not triggering

Question

I'm remaking my website and want to do everything from scratch (no bootstrap, foundation, etc). Right now I'm making the navbar and I'm trying to get it to toggle slide in and out on click. For some reason click events aren't working and I'm not sure what I did wrong. I made a rough example in codepen here

HTML

<script src="jquery-3.4.1.min.js"></script>
<div class="box"></div>

CSS

.box {
  transform: translateX(0);
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 250ms;
}
.slide {
  transform: translateX(250px);
}

JS

$(function() {
  $('.box').on('click', function(slideToggle) {
    $(this).toggleClass('slide');
  });
});

jQuery is not available, if you inspect the page you will see Uncaught ReferenceError: $ is not defined — Mamun
– Mamun, Commented Oct 8, 2019 at 5:20

Bilal Siddiqui · Accepted Answer · 2019-10-08 05:27:12Z

2

For you codepen example:

Go to settings -> Add library -> search jquery and select.

If this is the same case with your real code:

open console -> check if $ is not defined or $ is not jquery ?

if $ not defined, add a valid jquery cdn url.

if $ is not jquery, try to find a conflicting library.

answered Oct 8, 2019 at 5:27

Bilal Siddiqui

3,6491 gold badge16 silver badges22 bronze badges

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

Comments

designerbase · Accepted Answer · 2019-10-08 05:53:47Z

1

Everything is good in your code except your jQuery reference, please check your downloaded jquery path, or you can use like below, now i am using jquery directly from the jquery official site

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="box"></div>

extra note: found you added some new CSS3 attribute ("transition: transform 250ms;"), when ever you use the CSS3 attribute please make sure you should reset the attribute for all browsers, like wekit,moz,

thanks

answered Oct 8, 2019 at 5:53

designerbase

613 bronze badges

2 Comments

Nickolas Over a year ago

oh gosh im an idiot haha. i was messing with the code and trying different selectors and events but never checked my reference haha. thanks!

designerbase Over a year ago

haha no issues bro. when you have facing some issue in your code, go n check the console, you will get to know what exactly the error is, if something is undefined which means may be your reference to the function is not proper or some typo you made, if in the case of $ or jquery says its undefined which means jquery is not loaded in your page. and please add the reset for the css also otherwise your page will break in firefox and safari browsers

HackerMan · Accepted Answer · 2019-10-08 05:34:52Z

0

You have not loaded jQuery correctly for codepen. To add jQuery simply replace the <script src="jquery-3.4.1.min.js"></script>

with

<script src="https://code.jquery.com/jquery-1.12.3.js" integrity="sha256-1XMpEtA4eKXNNpXcJ1pmMPs8JV+nwLdEqwiJeCQEkyc=" crossorigin="anonymous"></script>

answered Oct 8, 2019 at 5:34

HackerMan

2552 silver badges13 bronze badges

Comments

Julian Suringa · Accepted Answer · 2019-10-08 05:52:27Z

0

You can add jquery cdn manually in setting just click the setting icon and click the javascript tab then under that search the jquery and hit enter.

screenshot for jquery cdn codepen setting

answered Oct 8, 2019 at 5:52

Julian Suringa

1

Comments

Cat · Accepted Answer · 2019-10-08 10:47:36Z

0

It seems to work fine here in a snippet. If you replace your script on codepen with the vanilla version below, it works there too. (Note: only tested in Chrome)

$(function() {
  $('.box').on('click', function(slideToggle) {
    $(this).toggleClass('slide');
  });
});

.box {
  transform: translateX(0);
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 250ms;
}

.slide {
  transform: translateX(250px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery-3.4.1.min.js"></script>
<div class="box"></div>

Alternative script for your codepen:

document.querySelector(".box").addEventListener("click", function(event){
  event.target.classList.toggle("slide");
});

edited Oct 8, 2019 at 10:47

answered Oct 8, 2019 at 5:33

Cat

4,2502 gold badges13 silver badges18 bronze badges

Collectives™ on Stack Overflow

Jquery click event not triggering

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related