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

Question

So using javaScript i set my last navigation link the class of 'contact'

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

Now i want to do a click function for this so i have tried:

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

Now this does not work and i do not see anything in the console.

Am i doing anything wrong here?

I have also tried to just do a simple

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

EDIT

<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

please use $(document).find to bind click event of dynamically appended class

please update your js code as below

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

refer working fiddle at here

Answer 2

Use code like this, add jquery file & start with document ready function

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

Answer 3

Where's .content-wrapper and .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>