jQuery fails to change the CSS class upon clicking

I am attempting to accomplish the following:

By clicking on a specific DIV, I want to add or remove a CSS class from another DIV.

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

The functionality is correct on JSFiddle, but when I implement it on my WordPress site, it's not working.

See here for an example:
link removed

My goal is to have the class "animated" added to "spin-l" and "spin-r" when someone clicks on the play button with the class "mejs-play".

Could anyone explain why it works on JSFiddle but not on my site?

javascriptjqueryhtmlcsswordpress

Answer №1

When working with WordPress and jQuery in noconflict-mode, it's important to note that you cannot access it using the typical $ symbol.

Instead, try this method:

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

Note:

It appears that the Mediaelement-library may prevent the click-event from propagating properly.

To resolve this issue, you can use:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for adding an additional div inside a navigation container, evenly spacing objects, and aligning the search bar to the right

I'm currently working on designing a simple navigation bar but I'm facing difficulties in aligning the elements correctly. See my progress here: https://jsfiddle.net/zigzag/bL1jxfax/ Here are my objectives: 1) Ensure that the navigation bar rea ...

jqueryhtmlcss

Instructions for transforming rows into columns in JSON format

Looking to convert an array of JSON objects into a format where rows become columns and the values at the side become column values, similar to the crosstab function in PostgreSQL. The JSON data looks something like this: {"marketcode":"01","size":"8,5", ...

javascriptarraysjson

Transferring a zipped file from the backend of SailsJS to the frontend of React Redux via

My SailsJS Backend is responsible for generating a zip File when requested by my React App with Redux on the Frontend. I am utilizing Sagas for asynchronous calls and fetch to make the request. In the backend, I have attempted various methods such as: //z ...

javascriptreactjsexpressreduxsails.js

Choose the url path using UI-Router option

In my Angular project, I am implementing a complex structure of nested states using UI-Router. I am working on setting up a parent state that will determine the language of the application based on an optional locale path in the URL. For Spanish www.web ...

javascriptangularjslocalizationangular-ui-routersingle-page-application

Leetcode Algorithm for Adding Two Numbers

Recently, I attempted the following leetCode Problem: However, I encountered an issue where one of my test cases failed and I'm unsure why. Here is the scenario: You are provided with two non-empty linked lists that represent two non-negative integ ...

javascript

Transferring information between a service and a controller

I'm struggling to pass data between a service and a controller in my AngularJS project. Even though I've followed the recommended steps, the code is not functioning as expected. Below is the controller snippet: function udpController($scope ...

javascriptangularjs

Placing a table inside a div container to ensure compatibility on all browsers

Although I typically avoid using tables, I am struggling to find a better solution for setting up a page layout with a search bar, three buttons, and two hyperlinks stacked on top of each other. The challenge is to have this control centered on the webpage ...

htmlcss

ASP.NET MVC 5: Jquery ajax not reaching controller

Here is the form I am working with: <form class="regForm" id="frmRegistration" method="post"> <h3>Register Customer Patient</h3> @Html.ValidationSummary(true) @Html.LabelFor(m => m.LastName) @Html.TextBoxFor(m => m.LastName, new { ...

c#jqueryajaxasp.net-mvcjquery-ajaxq

Python Selenium: Having trouble navigating through two menus using ActionChains before selecting an element

I've encountered an issue where I am attempting to click on an element that is located two levels down in a menu that only appears when hovering over it. For example: Menu -> Sub-Menu -> Element to be clicked content_menu = driver.find_element ...

pythonhtmlcssselenium

Enforcing the usage of window.location.href in vue-router hash mode is necessary for seamless navigation

Currently, I am working with vue-router 3.0.1, using the mode as hash. The current URL displays as: /#/?type=1 I attempted to modify the path while keeping the same base URL but with a different query parameter using window.location.href like so. windo ...

javascriptvue.jsvue-router

Execute a function upon user selection of "yes" in a jQuery dialog box triggered from C# code-behind

I am currently utilizing a message box in asp.net, but I am interested in implementing jquery for the same functionality. var DialogResult = MessageBox.Show("Do you want to create the File ?", "Start Invoicing", MessageBoxButtons.YesNo, MessageBox ...

c#jqueryasp.netjquery-ui-dialog

How can I integrate the "Pure CSS Sphere" feature into my website?

http://codepen.io/waynespiegel/pen/jEGGbj I stumbled upon this fantastic feature that I would love to incorporate into my website (purely for personal practice) and am intrigued by how it can be integrated. As a newbie in this type of programming, I' ...

htmlcsswebsasshaml

What is the best way to show a scrollbar within a container?

Is there a way to show a scrollbar inside a container when its content overflows, similar to how Facebook notifications display? When using overflow:auto, the scrollbar is shown outside the container. Is there a method to render the scrollbar within the c ...

javascriptjqueryhtmlcss

Implement scroll bar functionality on canvas following the initial loading phase

I am currently working with canvas and I need to implement a scroll bar only when it is necessary. Initially, when the page loads, there isn't enough content to require a scroll bar. My project involves creating a binary search tree visualizer where u ...

javascriptcsshtml5-canvasoverflowp5.js

Step-by-step guide on saving an array to localStorage using AngularJS

Currently working on constructing a shopping cart. My goal is to include the array invoice in localstorage for future reference. I suspect there may be some flaws with this particular approach. angular.module('myApp', ['ngCookies']); ...

javascripthtmlangularjscookiestore

What is the process for creating an if statement for product activation?

<form method="get" formenctype="text/plain" action="https://app.cryptolens.io/api/key/Activate" > <input type="text" maxlength="23" size="80" name="Key" placeholder="XXXXX-XXXXX-XXXXX-XXXXX" /> <input type="hidden" name="toke ...

javascripthtml

Using res.sendfile in a Node Express server and sending additional data along with the file

Can a Node.JS application redirect to an HTML file using the res.sendFile method from express and include JSON data in the process? ...

javascriptnode.jsexpress

Maximum Age Setting for Iron Session Cookie

Currently, I am attempting to configure a Next JS application with iron-session and a 'remember me' feature. The objective is for the maxAge of the iron-session cookie to be extended to a week if the user selects the remember me option on the log ...

javascriptsessionnext.js

How to create a jQuery function to click and pull down a div, similar to the iOS notification center

While I know about the jQuery .toggle() and .slideDown() functions, I am interested in a different approach. Is there a way for the user to click on a link or item and have the div pull/slide down? I want to achieve a similar effect to the iOS notificatio ...

jqueryjquery-uiresizablejquery-ui-resizable

Retrieve ViewState variables using an Ajax call to a Static Method

Just starting out with Ajax and I have a question: The Aspx page contains a grid view that allows sorting. Below the grid is a dropdown list of page numbers, allowing users to navigate to different pages. When the page first loads, the grid displays recor ...

jqueryajax