javascript - 不能在 #header 中的 HTML/CSS 模板中使用 onClick

Question

我使用的是 HTML/CSS 模板，无法在标题中使用 onClick 事件。我到处都试过了，如果我删除 #header 类，那么它就可以正常工作，所以它一定是在我假设的 js 中阻止它的东西。我查看了 js 并删除了一个名为 hideOnClick 的东西，但到目前为止它什么也没做。

我将在下面发布 JS。我对 jquery 之类的东西很不了解，所以如果有明显的问题，我深表歉意。

/*
    Prologue by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

(function($) {
  skel.breakpoints({
    wide: '(min-width: 961px) and (max-width: 1880px)',
    normal: '(min-width: 961px) and (max-width: 1620px)',
    narrow: '(min-width: 961px) and (max-width: 1320px)',
    narrower: '(max-width: 960px)',
    mobile: '(max-width: 736px)'
  });

  $(function() {
    var $window = $(window),
      $body = $('body');

    // Disable animations/transitions until the page has loaded.
    $body.addClass('is-loading');

    $window.on('load', function() {
      $body.removeClass('is-loading');
    });

    // CSS polyfills (IE<9).
    if (skel.vars.IEVersion < 9) $(':last-child').addClass('last-child');

    // Fix: Placeholder polyfill.
    $('form').placeholder();

    // Prioritize "important" elements on mobile.
    skel.on('+mobile -mobile', function() {
      $.prioritize('.important\\28 mobile\\29', skel.breakpoint('mobile').active);
    });

    // Scrolly links.
    $('.scrolly').scrolly();

    // Nav.
    var $nav_a = $('#nav a');

    // Scrolly-fy links.
    $nav_a.scrolly().on('click', function(e) {
      var t = $(this),
        href = t.attr('href');

      if (href[0] != '#') return;

      e.preventDefault();

      // Clear active and lock scrollzer until scrolling has stopped
      $nav_a.removeClass('active').addClass('scrollzer-locked');

      // Set this link to active
      t.addClass('active');
    });

    // Initialize scrollzer.
    var ids = [];

    $nav_a.each(function() {
      var href = $(this).attr('href');

      if (href[0] != '#') return;

      ids.push(href.substring(1));
    });

    $.scrollzer(ids, { pad: 200, lastHack: true });

    // Header (narrower + mobile).

    // Toggle.
    $('<div id="headerToggle">' + '<a href="#header" class="toggle"></a>' + '</div>').appendTo(
      $body
    );

    // Header.
    $('#header').panel({
      delay: 500,
      // hideOnClick: true,
      hideOnSwipe: true,
      resetScroll: true,
      resetForms: true,
      side: 'left',
      target: $body,
      visibleClass: 'header-visible'
    });

    // Fix: Remove transitions on WP<10 (poor/buggy performance).
    if (skel.vars.os == 'wp' && skel.vars.osVersion < 10)
      $('#headerToggle, #header, #main').css('transition', 'none');
  });
})(jQuery);

无法工作的 html 示例:

    <div id="header">
      <button
        onClick={() => {
          console.log('true');
        }}
      >
        Click{' '}
      </button>
    </div>

Answer 1

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});