Question

因此，使用javaScript我将上一个导航链接设置为＆＃39; contact＆＃39;

$('#menu-main-menu li').last().addClass('contact');

现在我想为此做一个点击功能，所以我尝试过：

$(document).on('click', '.contact', function(){
    $('.contact-wrapper').show();
    console.log('here');
});

现在这不起作用，我在控制台中看不到任何内容。

我在这里做错了吗？

我也尝试过做一个简单的

$('').click(function(){});

修改

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



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

Answer 1

请使用$（document）.find绑定动态附加类

的click事件

请更新您的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 );

在here

指的是工作小提琴

Answer 2

使用这样的代码，添加jquery文件＆amp;从文档就绪功能开始

＆＃13;

First list has elements: [1, 2, 3]
Second list has elements: [2, 3, 4]
Intersection between the lists is: [2, 3]

＆＃13;

Answer 3

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

jQuery单击函数不绑定到动态更改的类

3 个答案: