javascript - Wordpress jQuery 单击不工作。请帮助 :)

Question

有些 jQuery 有效，有些则无效。在这种情况下，点击功能不起作用。

此代码有效:-

  $j=jQuery.noConflict();

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

然而事实并非如此。这就是我所做的:- 它来自这个 codepen :- http://codepen.io/domierosina/pen/qdYRYM

Demo1.js :-

var $j=jQuery.noConflict();

 // Use jQuery via $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();
  });
  });

在 functions.php(子主题)

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

在 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>

单击“菜单”按钮后，没有任何反应。

检查 Firefox 中的 Inspect 元素，demo1.js 加载时没有任何问题

Answer 1

看起来菜单按钮工作正常!

var $j = jQuery.noConflict();

// Use jQuery via $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>