toggle CSS class on click using jQuery does not work

Question

I try to do the following:

When I click on a specific DIV a CSS class is added/removed from another DIV.

Take a look here for a live example (and click on "click me"):
http://jsfiddle.net/fyehLqsc/

   $(document).ready(function() {
    $(".mejs-play").click(function () {
      $(".spin-l").toggleClass("animated");
      $(".spin-r").toggleClass("animated"); 
    });
   });

It is working as it should, but when I do the same thing on my WordPress site, it's not working.

Take a look here:
link removed

What I want to achieve: If someone clicks on the play button which has the class "mejs-play" the class "animated" shall be added to "spin-l" and "spin-r".

Can anyone please tell me why it's working on JSFiddle but not on my site?

Answer 1

jQuery is running in noconflict-mode in wordpress, you can't access it via $

Use this:

   jQuery(document).ready(function($) {
    $(".mejs-play").click(function () {
      $(".spin-l").toggleClass("animated");
      $(".spin-r").toggleClass("animated"); 
    });
   });

---

Edit:

as it seems the Medialelement-library stops the propagation of the click-event.

This works for me:

  jQuery(document).ready(   function ($) { 
    $('audio').on('play pause',function(e){  
      $(this).closest('.current-cast').prevAll('.cassette').last()
      .find(".spin-l,.spin-r").toggleClass("animated",e.type==='play');
    });
  });