jQuery点击函数未绑定到动态更改的类

.content-wrapper和.overlay在哪里？

(function($) {
  $('#menu-main-menu li').last().addClass('contact');
  $(document).on('click', 'contact', function() {
    $('.contact-wrapper').show();
    console.log('here');
  });
  $('.overlay').click(function() {
    $('.contact-wrapper').hide();
  });
})(jQuery);

<ul id="menu-main-menu" class="nav navbar-nav">
  <li class=" active"><a title="Home" href="http://jackmoodygroup/home/">Home</a>
  </li>
  <li><a title="About" href="http://jackmoodygroup/about/">About</a>
  </li>
  <li class=" dropdown"><a title="Landscaping" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Landscaping <span class="caret"></span></a>
    <ul role="menu" class=" dropdown-menu">
      <li><a title="Soft Landscaping &amp; Fencing" href="http://jackmoodygroup/landscaping/soft-landscaping/">Soft Landscaping &amp; Fencing</a>
      </li>
      <li><a title="Hard Landscaping &amp; Fencing" href="http://jackmoodygroup/landscaping/hard-landscaping/">Hard Landscaping &amp; Fencing</a>
      </li>
      <li><a title="Developer Landscaping Services" href="http://jackmoodygroup/landscaping/developer-landscaping-services/">Developer Landscaping Services</a>
      </li>
      <li><a title="Maintenance" href="http://jackmoodygroup/landscaping/maintenance/">Maintenance</a>
      </li>
      <li><a title="Domestic Landscaping Services" href="http://jackmoodygroup/landscaping/domestic-landscaping-services/">Domestic Landscaping Services</a>
      </li>
      <li><a title="Building &amp; Development Services" href="http://jackmoodygroup/landscaping/building-development-services/">Building &amp; Development Services</a>
      </li>
      <li><a title="Sports &amp; Recreation" href="http://jackmoodygroup/landscaping/sports-recreation/">Sports &amp; Recreation</a>
      </li>
      <li><a title="Plant Hire" href="http://jackmoodygroup/landscaping/plant-hire/">Plant Hire</a>
      </li>
      <li><a title="JMix Products" href="http://jackmoodygroup/landscaping/jmix-products/">JMix Products</a>
      </li>
      <li><a title="Nursery &amp; Trade Services" href="http://jackmoodygroup/landscaping/nursery-trade-services/">Nursery &amp; Trade Services</a>
      </li>
    </ul>
  </li>
  <li class=" dropdown"><a title="Recycling" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Recycling <span class="caret"></span></a>
    <ul role="menu" class=" dropdown-menu">
      <li><a title="Renewables" href="http://jackmoodygroup/recycling/renewables/">Renewables</a>
      </li>
      <li><a title="In-Vessel Composting" href="http://jackmoodygroup/recycling/in-vessel-composting/">In-Vessel Composting</a>
      </li>
      <li><a title="Consultancy" href="http://jackmoodygroup/recycling/consultancy/">Consultancy</a>
      </li>
      <li><a title="Research and Development" href="http://jackmoodygroup/recycling/research-and-development/">Research and Development</a>
      </li>
      <li><a title="Anaerobic Digestion" href="http://jackmoodygroup/recycling/anaerobic-digestion/">Anaerobic Digestion</a>
      </li>
      <li><a title="Food Waste Dryers" href="http://jackmoodygroup/recycling/food-waste-dryers/">Food Waste Dryers</a>
      </li>
      <li><a title="Envirofuels" href="http://jackmoodygroup/recycling/envirofuels/">Envirofuels</a>
      </li>
      <li><a title="Inert Recycling" href="http://jackmoodygroup/recycling/inert-recycling/">Inert Recycling</a>
      </li>
      <li><a title="Green Recycling" href="http://jackmoodygroup/recycling/green-recycling/">Green Recycling</a>
      </li>
    </ul>
  </li>
  <li><a title="Projects" href="http://jackmoodygroup/projects/">Projects</a>
  </li>
  <li><a title="Retail" href="http://jackmoodygroup/retail-2/">Retail</a>
  </li>
  <li><a title="Vacancies" href="http://jackmoodygroup/vacancies/">Vacancies</a>
  </li>
  <li class="contact"><a title="Contact" href="#contact-us">Contact</a>
  </li>
</ul>

请使用$（document）.find绑定动态附加类的点击事件

请更新你的js代码如下

(function($) {
    $('#menu-main-menu li').last().addClass('contact');
    $(document).find('.contact').click( function(){
        $('.contact-wrapper').show();
        console.log('here');
    } );
    $('.overlay').click(function(){
        $('.contact-wrapper').hide();
    });
})( jQuery );

请参阅此处的工作小提琴

使用这样的代码，添加jquery文件&从文档准备功能开始

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-main-menu" class="nav navbar-nav"><li class=" active"><a title="Home" href="http://jackmoodygroup/home/">Home</a></li>
<li><a title="About" href="http://jackmoodygroup/about/">About</a></li>
<li class=" dropdown"><a title="Landscaping" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Landscaping <span class="caret"></span></a>
    <ul role="menu" class=" dropdown-menu">
        <li><a title="Soft Landscaping &amp; Fencing" href="http://jackmoodygroup/landscaping/soft-landscaping/">Soft Landscaping &amp; Fencing</a></li>
        <li><a title="Hard Landscaping &amp; Fencing" href="http://jackmoodygroup/landscaping/hard-landscaping/">Hard Landscaping &amp; Fencing</a></li>
        <li><a title="Developer Landscaping Services" href="http://jackmoodygroup/landscaping/developer-landscaping-services/">Developer Landscaping Services</a></li>
        <li><a title="Maintenance" href="http://jackmoodygroup/landscaping/maintenance/">Maintenance</a></li>
        <li><a title="Domestic Landscaping Services" href="http://jackmoodygroup/landscaping/domestic-landscaping-services/">Domestic Landscaping Services</a></li>
        <li><a title="Building &amp; Development Services" href="http://jackmoodygroup/landscaping/building-development-services/">Building &amp; Development Services</a></li>
        <li><a title="Sports &amp; Recreation" href="http://jackmoodygroup/landscaping/sports-recreation/">Sports &amp; Recreation</a></li>
        <li><a title="Plant Hire" href="http://jackmoodygroup/landscaping/plant-hire/">Plant Hire</a></li>
        <li><a title="JMix Products" href="http://jackmoodygroup/landscaping/jmix-products/">JMix Products</a></li>
        <li><a title="Nursery &amp; Trade Services" href="http://jackmoodygroup/landscaping/nursery-trade-services/">Nursery &amp; Trade Services</a></li>
    </ul>
</li>
<li class=" dropdown"><a title="Recycling" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Recycling <span class="caret"></span></a>
    <ul role="menu" class=" dropdown-menu">
        <li><a title="Renewables" href="http://jackmoodygroup/recycling/renewables/">Renewables</a></li>
        <li><a title="In-Vessel Composting" href="http://jackmoodygroup/recycling/in-vessel-composting/">In-Vessel Composting</a></li>
        <li><a title="Consultancy" href="http://jackmoodygroup/recycling/consultancy/">Consultancy</a></li>
        <li><a title="Research and Development" href="http://jackmoodygroup/recycling/research-and-development/">Research and Development</a></li>
        <li><a title="Anaerobic Digestion" href="http://jackmoodygroup/recycling/anaerobic-digestion/">Anaerobic Digestion</a></li>
        <li><a title="Food Waste Dryers" href="http://jackmoodygroup/recycling/food-waste-dryers/">Food Waste Dryers</a></li>
        <li><a title="Envirofuels" href="http://jackmoodygroup/recycling/envirofuels/">Envirofuels</a></li>
        <li><a title="Inert Recycling" href="http://jackmoodygroup/recycling/inert-recycling/">Inert Recycling</a></li>
        <li><a title="Green Recycling" href="http://jackmoodygroup/recycling/green-recycling/">Green Recycling</a></li>
    </ul>
</li>
<li><a title="Projects" href="http://jackmoodygroup/projects/">Projects</a></li>
<li><a title="Retail" href="http://jackmoodygroup/retail-2/">Retail</a></li>
<li><a title="Vacancies" href="http://jackmoodygroup/vacancies/">Vacancies</a></li>
<li class="contact"><a title="Contact" href="#contact-us">Contact</a></li>
</ul>
<script type="text/javascript">
  jQuery(document).ready(function(){
  jQuery('#menu-main-menu li').last().addClass('contact');
    jQuery(document.body).on('click', 'li.contact', function(){
        jQuery('.contact-wrapper').show();
      console.log('here');
    } );
        jQuery('.overlay').click(function(){
        jQuery('.contact-wrapper').hide();
    });
  });
 </script>