[英]jQuery click function not binding to dynamic changed class
因此,使用javaScript我將我的最后一個導航鏈接設置為“聯系人”類
$('#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 & Fencing" href="http://jackmoodygroup/landscaping/soft-landscaping/">Soft Landscaping & Fencing</a></li>
<li><a title="Hard Landscaping & Fencing" href="http://jackmoodygroup/landscaping/hard-landscaping/">Hard Landscaping & 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 & Development Services" href="http://jackmoodygroup/landscaping/building-development-services/">Building & Development Services</a></li>
<li><a title="Sports & Recreation" href="http://jackmoodygroup/landscaping/sports-recreation/">Sports & 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 & Trade Services" href="http://jackmoodygroup/landscaping/nursery-trade-services/">Nursery & 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 );
請使用$(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 );
在這里參考工作小提琴
使用這樣的代碼,添加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 & Fencing" href="http://jackmoodygroup/landscaping/soft-landscaping/">Soft Landscaping & Fencing</a></li> <li><a title="Hard Landscaping & Fencing" href="http://jackmoodygroup/landscaping/hard-landscaping/">Hard Landscaping & 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 & Development Services" href="http://jackmoodygroup/landscaping/building-development-services/">Building & Development Services</a></li> <li><a title="Sports & Recreation" href="http://jackmoodygroup/landscaping/sports-recreation/">Sports & 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 & Trade Services" href="http://jackmoodygroup/landscaping/nursery-trade-services/">Nursery & 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>
.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 & Fencing" href="http://jackmoodygroup/landscaping/soft-landscaping/">Soft Landscaping & Fencing</a> </li> <li><a title="Hard Landscaping & Fencing" href="http://jackmoodygroup/landscaping/hard-landscaping/">Hard Landscaping & 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 & Development Services" href="http://jackmoodygroup/landscaping/building-development-services/">Building & Development Services</a> </li> <li><a title="Sports & Recreation" href="http://jackmoodygroup/landscaping/sports-recreation/">Sports & 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 & Trade Services" href="http://jackmoodygroup/landscaping/nursery-trade-services/">Nursery & 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.