CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nickolas
Nickolas

Reputation: 13

Jquery click event not triggering

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

Upvotes: 1

Views: 96

Answers (5)

Cat
Cat

Reputation: 4246

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

Upvotes: 0

designerbase
designerbase

Reputation: 61

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

Upvotes: 1

Julian Suringa
Julian Suringa

Reputation: 1

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

Upvotes: 0

HackerMan
HackerMan

Reputation: 245

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>

Upvotes: 0

Bilal Siddiqui
Bilal Siddiqui

Reputation: 3629

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.

Upvotes: 2

Related Questions