Question

我有一个单页应用。

NAV内部是UL。 UL包含具有嵌套菜单的LI

<li>
     <a href="#"><i class="fa fa-envelope"></i> <span class="nav-label">Messages</span><span id="NavMessageTotal"class="label label-warning pull-right">16/24</span></a>
     <ul class="nav nav-second-level collapse">
         <li><a class="nav-link" id="NavMailbox" href="#">Mailbox</a></li>
     </ul>
</li>

我尝试过使用：

.off('click', 'selector').on('click','selector')
.on('click', 'selector').off('click','selector')
.unbind()
 var = $('selector').unbind();

我尝试过使用带有toggleClass的循环：

$('selector').each(function(){
    $(this).toggleClass('off');

   if($(this).hasClass('off') == false){
       $('mailBoxContainer').fadeIn(2000, foo); 
   }

});

当我点击ID为#NavMailbox的锚点时，我至少会触发点击事件2次。它只被点击一次。

＆＃13;

$('#NavEditGalleries').on('click',function () {
  if($(this).attr('active') != 'true'){
    $('.nav-link').removeAttr('active');
    apc.fadeOut(pageFade, function () {
      $('#GalleryEditorContainer').fadeIn(pageFade, console.log('Editor Clicked'));
      $('#NavEditGalleries').attr('active', 'true');
    });
  }
});

＆＃13;

<li id="NavEditors">
  <a href="#" data-selector="NavEditorsMain"><i class="fa fa-th-large"></i> <span class="nav-label">Editors</span> <span class="fa arrow"></span></a>
  <ul class="nav nav-second-level collapse">
    <li><a class="nav-link" href="#" data-selector="NavEditorsAbout" onclick="NavClick()" id="NavEditAbout">About</a></li>
    <li><a class="nav-link" href="#" data-selector="NavEditorsContact" id="NavEditContact">Contact</a></li>
    <li><a class="nav-link" href="#" data-selector="NavEditorsHome" id="NavEditHome">Home</a></li>
    <li><a class="nav-link" href="#" data-selector="NavEditorsGalleries" id="NavEditGalleries">Galleries</a></li>
  </ul>
</li>

＆＃13;

代码并不完全合适。可以找到文件和完整项目zip的链接Here on Dropbox

Answer 1

问题出在

apc.fadeOut(pageFade, function () {
  $('#GalleryEditorContainer').fadeIn(pageFade, console.log('Editor Clicked'));
  $('#NavEditGalleries').attr('active', 'true');
});

apc包含多个元素（因为它是从$('div.TheLoot');创建的。

这些元素中的每一个都是fadedOut，然后（为每个元素）在fadeIn上发出$('#GalleryEditorContainer')。由于每个fadeOut / fadeIn都会出现这种情况，因此您会获得多个日志。

来自fadeOut docs的引用

<强>完整
  类型：功能（）
  动画完成后调用的函数，每个匹配元素调用一次。

此外，您应该将函数作为回调函数传递给fadeIn

$('#GalleryEditorContainer').fadeIn(pageFade, function(){console.log('Editor Clicked')});

解决方法是fadeOut所有问题，然后使用相关的回调发出一个fadeIn。

像这样的东西

apc.fadeOut(pageFade)
   .filter('#GalleryEditorContainer').fadeIn(pageFade, function () {
       console.log('Editor Clicked');
       $('#NavEditGalleries').attr('active', 'true');
   });

jQuery Click Function触发多个TImes

1 个答案: