jQuery .append发生多次。我如何防止这种情况？

Question

我看了一些类似的帖子，但还没有找到我正在寻找的解决方案。我试图追加div#dropdownmenu只有一次。但是，当我将鼠标悬停在div上时，它会继续发生。任何帮助将不胜感激。

$(function() { 
    if ($('div#dropmenu').length == 0) { 
     $('#site_nav > ul > a').live('mouseenter', function() { 
      $(this).append("<div></div>"); 
      $('#site_nav > ul > li a div').attr('id', 'dropmenu'); 
      $('div#dropmenu').html("<ul></ul>"); 
      $('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>"); 
     }); 
    } else { 
     $('#site_nav > ul > li > a').append(""); 
    } 
}); 

Answer 1

您可以删除函数处理程序执行后。我给匿名函数一个名称以便于参考。

$(function() { 
    if ($('div#dropmenu').length == 0) { 
     $('#site_nav > ul > a').live('mouseenter', function f() { 
      $(this).append("<div></div>"); 
      $('#site_nav > ul > li a div').attr('id', 'dropmenu'); 
      $('div#dropmenu').html("<ul></ul>"); 
      $('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>"); 
      $(this).die('mouseenter', f); 
     }); 
    } else { 
     $('#site_nav > ul > li > a').append(""); 
    } 
}); 

http://api.jquery.com/die/

Answer 2

您还可以使用jQuery的.one()方法，以确保事件处理只执行一次。

$(function() { 
    if ($('div#dropmenu').length == 0) { 
     $('#site_nav > ul > a').one('mouseenter', function() { 
      $(this).append("<div></div>"); 
      $('#site_nav > ul > li a div').attr('id', 'dropmenu'); 
      $('div#dropmenu').html("<ul></ul>"); 
      $('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>"); 
     }); 
    } else { 
     $('#site_nav > ul > li > a').append(""); 
    } 
}); 

http://api.jquery.com/one/

Answer 3

要检查$('div#dropmenu').length == 0)您将事件监听器前，后，监听连接，将始终执行。您可以移动事件侦听器中的检查。

$(function() { 
    $('#site_nav > ul > a').live('mouseenter', function() { 
     if ($('div#dropmenu').length == 0) { 
      $(this).append("<div></div>"); 
      $('#site_nav > ul > li a div').attr('id', 'dropmenu'); 
      $('div#dropmenu').html("<ul></ul>"); 
      $('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>"); 
     } else { 
      $('#site_nav > ul > li > a').append(""); 
     } 
    }); 
});