jQuery code is not working in WordPress

Question

I'm just trying to include a simple jQuery script in a WordPress page. A friend of mine made the script and it's working in my browser. However, when I copy the following code in a WordPress page, I can't click the items and it doesn't seem to work. However, JavaScript is working on WordPress.

This is the code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script> 
var array = []

 $('.productitem').on('click', function() {
  var value = $(this).attr('value');


  if($(this).css('position') == 'relative') {
    $(this).css({'border': '0px solid black',
                 'position': 'static'});
    array = jQuery.grep(array, function(removeValue) {
  return removeValue != value;
    });
  } else {
$(this).css({'border': '1px solid black',
             'position': 'relative'});
array.push(value);
  }

 });

     $('.doorgaan').on('click', function() {
if (array.length == 0) {
    alert('Choose at least 1')
 }else if (array.length == 1) {
    var link = 'http://www.project4.ramonkagie.nl/product-tag/'+array[0];
    window.location.href = link;
 } else if(array.length == 2) {
    var link = 'http://www.project4.ramonkagie.nl/product-tag/'+array[0]+', '+array[1];
    window.location.href = link;
 } else if(array.length == 3) {
    var link = 'http://www.project4.ramonkagie.nl/product-tag/'+array[0]+', '+array[1]+', '+array[2];
    window.location.href = link;
 } else if(array.length > 3) {
    alert("You can only choose 3")
 }
 })

</script>

<img class="productitem alignnone wp-image-578" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/padded-black-front-

219x300.png" alt="padded-black-front" width="130" height="178" value="sportief" />

<img class="productitem alignnone wp-image-457" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/skopje-front-1.png" 

alt="skopje-front (1)" width="130" height="209" value="casual" />

<img class="productitem alignnone wp-image-442" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/estro-black-front.png" 

alt="estro-black-front" width="150" height="161" value="zakelijk" />

<img class="productitem alignnone wp-image-491" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/elias_lichtblauw_voorkant-

1.png" alt="elias_lichtblauw_voorkant (1)" width="150" height="130" value="sportief" />

<img class="productitem alignnone wp-image-479" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/alexis-cardigan-front-1.png" 

alt="alexis-cardigan-front (1)" width="150" height="130" value="sportief" />

<img class="productitem alignnone wp-image-471" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/saint-germain-    sweater-

 front.png" alt="saint-germain-sweater-front" width="150" height="149" value="zakelijk" />

<img class="productitem alignnone wp-image-544" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/russell-side.png" 

alt="russell-side" width="150" height="93" value="casual" />

<img class="productitem alignnone wp-image-588" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/antares-cement-ivy-front.png" 

alt="antares-cement-ivy-front" width="150" height="83" value="sportief" />

<img class="productitem alignnone wp-image-509" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/steve-black-leather-1_1.png" 

alt="steve-black-leather-1_1" width="150" height="74" value="zakelijk" />

<img class="productitem alignnone wp-image-522" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/desertboot_black_right.png" 

alt="desertboot_black_right" width="150" height="82" value="casual" />

<button class="doorgaan">Doorgaan</button>

As you can see on this page: http://www.project4.ramonkagie.nl/script/ it doesn't do anything. I've included it in the WordPress HTML page editor. I found that I can use the wp_enqueue_script, but that seems to be included in the PHP files, and I just want to include the script to a simple WordPress page.

It says that you script file is not included and also there seems to have error with your isotope function (maybe your plugin isn't included right?) Javascript stops working when facing an error — Yann Chabot
WordPress usually uses jQuery() over $() as a way to reduce conflicts. You should also check the browser's console for errors. — j08691

Manish Shukla Manish Shukla · Accepted Answer · 2015-12-07T18:19:01

There are some issue with your approach.

you do not need to include jquery file as you wp setup already has included this library.
if you want to use $ symbol for jquery as default jQuery is used in you setup then you have to typecast it like jQuery(function($) { you code });
you script is not working because i think you have added your script in wordpress page. Its better to create a js file add you code and include it in footer.

Hope this will help you.

jQuery code is not working in WordPress

1 Answers