无法在#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>');
});

Answer 2

这是用jQuery获得click功能的方法：

$(function()
{
    // Use the .on('click', '#id', function(){}) rather than other options
    // for binding click events to dynamically added content as pointed out
    // by @Vini
    $(document).on("click","#header",function()
    {
        alert( "Header has been clicked." );
    });
    $(document).on("click","#buttonToBeClicked",function()
    {
        alert("Button has been clicked");
    });
});

.headerStyle
{
  position:relative;
  float:left;
  width:200px;
  height:100px;
  background-color:#09f;
  text-align:center;
}
.buttonStyle
{
  position:relative;
  margin: 38px auto;
}

<div id="header" class="headerStyle">
  <input type="button" id="buttonToBeClicked" value="clickMe" class="buttonStyle" />
</div>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>