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.