Having trouble with WordPress jQuery Click function. Would greatly appreciate some assistance :)

There seems to be a mix of working and non-working jQuery code. Specifically, the click function is not functioning properly in this case.

Here is an example of the code that works:

  $j=jQuery.noConflict();

   // Using jQuery with $j(...)
  $j(document).ready(function(){
    alert('test');
   });

However, the following code does not work as intended. This code is from a codepen example found here: http://codepen.io/domierosina/pen/qdYRYM

Demo1.js code snippet:

var $j=jQuery.noConflict();

 // Using jQuery with $j(...)
  $j(document).ready(function(){
  $j('#overlay-menu').click(function() {
  $j('.overlay').addClass('overlay-open');
    $j('.menuButton').hide();
  });
  $j('.overlay-close').click(function() {
     $j('.overlay').removeClass('overlay-open');
    $j('.menuButton').show();
  });
  });

In the functions.php (child theme) file:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
  function add_my_script() {
    wp_enqueue_script(
    'demo1', 
    get_stylesheet_directory_uri() . '/js/demo1.js', 
    array('jquery') 
  );
  }

In the HTML:

  <div id="container">
    <button id="overlay-menu" class="menuButton" type="button">Menu</button>
   </div>

   <div class="overlay overlay-data">
     <button type="button" class="overlay-close">Close</button>
      <nav>
     <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Portfolio</a></li>
     </ul>
    </nav>
     </div>

Upon clicking the Menu button, no action is triggered.

When inspecting the element in Firefox, it shows that demo1.js is being loaded without any issues.

Answer №1

It appears that the menu button is functioning correctly!

var $j = jQuery.noConflict();

// Using jQuery through $j(...)
$j(document).ready(function() {
  $j('#overlay-menu').click(function() {
    $j('.overlay').addClass('overlay-open');
    $j('.menuButton').hide();
  });
  $j('.overlay-close').click(function() {
    $j('.overlay').removeClass('overlay-open');
    $j('.menuButton').show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button id="overlay-menu" class="menuButton" type="button">Menu</button>
</div>

<div class="overlay overlay-data">
  <button type="button" class="overlay-close">Close</button>
  <nav>
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">About</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
      <li><a href="#">Portfolio</a>
      </li>
    </ul>
  </nav>
</div>

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

Angular JS: Extracting the header from a CSV file

Just getting started with angular JS and I have a question. I need to take a CSV file from the user as input and then send it to the controller when they click submit. <button class="btn btn-primary" type="submit" ng-click="Input(File)">Submit</ ...

Unsupported MIME format

I'm encountering an issue where my stylesheet is not applying to my handlebars. It was working fine yesterday, but today I'm seeing a MIME error and I'm unsure of the reason behind it. Any assistance would be greatly appreciated. Server Cod ...

What is the best way to eliminate borders on a span element so they collapse seamlessly?

When using the tryit editor on this html and narrowing the result window (to around 200px), the border ends up inside the span as it spans across multiple lines. Is there a way to make the border "collapse" so that it forms a single irregular border around ...

Guide on programmatically choosing an option within a variable with the help of jQuery

Imagine having a variable named html, which holds select options like this: var html = '<select>'+ '<option value="10">10</option>'+ '<option value="20">20</option>'+ ...

Is there a bug hiding in the Angular code for the Codecademy Calendar App waiting to be found?

Currently, I am working on the Codecademy task - CalendarApp utilizing AngularJS which involves services and routing. Unfortunately, it seems to have some issues as the data is not displaying correctly and the expression: {{ day.date | date }} appears as i ...

Display a Table from a Nested ACF Repeater Field Using a Custom Shortcode

I'm attempting to present nested ACF Fields in a table using a shortcode on an elementor page. Despite my efforts to combine a shortcode with code I found online, I have not been successful. The part about the repeater was sourced from this link: W ...

Mysterious attributes - utilizing react and material-ui

In my current project, I am using react and material-ui. This is the code snippet from one of my components: <Dialog title="Dialog With Actions" actions={actions} modal={false} open={this.state.open} onRequestClose={this.handleClose ...

Establish restrictions for the minimum and maximum values for each year in the Date Range Picker

After searching for answers to my question, I have found some general solutions but none that fit my specific problem. I created a backend system for users to manage the availability of hotel rooms throughout the selected year. Using HTML/PHP/MySQL, I dis ...

The note-taking app's JavaScript code does not currently have the capability to store notes in local storage

const noteContainer = document.querySelector(".note-container"); const createBtn = document.querySelector(".btn"); let notes = document.querySelectorAll(".input-box"); function showNotes() { noteContainer.innerHTML = localS ...

Canceling a request on timeout using Ajax/jQuery

Beginner - Inquiry - Issue at hand: In scenarios where there are lingering open connections not closed by XMLHttprequest, the goal is to terminate them. Within a javascript file handling Ajax calls, the objective is to initiate a timer for each call and ...

Guide to dynamically incorporating items from an array into the filter operation

How can I dynamically insert items from an array into the filter on the wizard.html page, so that when the templateUrl in the route is called, it can be rendered on the wizard.html page? Controller angular.module('tareasApp') .controller(&apo ...

JavaScript code snippet for detecting key presses of 3 specific arrow keys on the document

For this specific action, I must press and hold the left arrow key first, followed by the right arrow key, and then the up arrow key. However, it seems that the up arrow key is not being triggered as expected. It appears that there may be some limitations ...

Eliminate a specific choice from a drop-down menu in an Angular application

I am implementing a feature where clicking on a button adds more select drop downs. I want to ensure that the selected options in these new dropdowns do not duplicate any already chosen options. Below is the code snippet used for the select drop down: < ...

Vue.js/Vuetify - Dynamically filter select options based on another select value

Is there a way to filter data in order to populate one select based on the selection made in another select? For example, if I choose a state from one select, can I have a second select loaded with all cities from that specific state? I am using vue.js and ...

The issue of Ajax not refreshing the HTML content within a dynamically generated div using JavaScript

(using jQuery) 1) I have a JavaScript click event that generates a form with a dropdown and a div like the following: $('#closestDiv').on('click','.firstClick', function(event){ var pass = $(this).attr('data-pass' ...

jQuery mobile page load event is failing to trigger

<div id="order-preview" data-role="page"> // header //ui-content //footer <script> $("#order-preview").on("pageload",function(event){ alert("aas"); }); $(document).on("pageload","#order-preview",function(event){ alert( ...

The styles are not being successfully applied to the Material UI Menu component within a React application

I recently started working with material-UI. I have a menu component that looks like this: <Menu classes={{ paper: css.paperMenu }} className={classNames({ [css.menuMarginTop]: true })} > .menuMarginTop { margin-top: 14px; } In ...

JavaScript - Placing Image Caption and Details within a Box

<div id="CollectionALL"> <div id="collection1" class="col"> <img id="Img1" class="imageCS"/> <H1 id="Title1"></H1> ...

Tips for utilizing field mapping for a nested item in TypeScript

I am working with two separate objects below, let response = { offer: { custom_fields: { job_title: 'engineer' }, starts_at: 'test', ...

`Vue Component failing to display data from Blade File`

In my project using Laravel Blade, I am currently in the process of converting some blade files to Vue components. One challenge I encountered is trying to display a dynamically created page title on the screen from the Vue component rather than the blade ...