Jquery 点击事件未触发

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

Answer 1

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.

Answer 2

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.getElementsByClassName("box")[0].addEventListener('click', slide);

function slide(event){
  const cl = event.target.classList;
  if(cl.contains("slide")){ cl.remove("slide"); }
  else{ cl.add("slide"); }
}

Answer 3

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>

Answer 4

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

Answer 5

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