Wordpress jQuery点击不工作。请帮忙 ：）

Question

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

此代码有效： -

  $j=jQuery.noConflict();

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

但事实并非如此。这就是我所做的： - 来自这个代码： - 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

看起来行菜单按钮工作正常！

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;