javascript - 单击时弹出重复的窗口

Question

我有这个JS:

  $(document).ready(function() {
       $("ul.social").hide();
       $("span.link").each(function(i){
         $(this).mouseover(function(){
           $("ul.social").eq(i).show("fast", function(){
             $("ul.social li a").click(function(){
               var link = this.href;
               window.open(link, " ", "height=350,width=600");
             });
           });
         });
       });
     });

还有这个 HTML:

<ul class="social">
    <li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php the_permalink() ?>" title="Compartilhar <?php the_title(); ?> no LinkedIn" target="_blank"><img src="<?php bloginfo('template_url'); ?>/img/in.png" alt="" width="24" /></a></li>
    <li><a href="https://plus.google.com/share?url=<?php the_permalink() ?>" title="Compartilhar <?php the_title(); ?> no Google Plus" target="_blank"><img src="<?php bloginfo('template_url'); ?>/img/gp.png" alt="" width="24" /></a></li>
    <li><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>" title="Compartilhar <?php the_title(); ?> no Facebook" target="_blank"><img src="<?php bloginfo('template_url'); ?>/img/fb.png" alt="" width="24" /></a></li>
    <li><a href="http://twitter.com/share?url=<?php the_permalink() ?>&amp;text=<?php the_title(); ?>&amp;via=chocoladesign" title="Compartilhar <?php the_title(); ?> no Twitter" target="_blank"><img src="<?php bloginfo('template_url'); ?>/img/tw.png" alt="" width="24" /></a></li>
</ul>

但是，每当我点击(ul.social li a)时，他就会复制该窗口。其中一个以 600x350 大小打开，另一个以全屏显示。

为什么会发生这种情况？

Answer 1

不要在 moseover 事件中附加 click 事件，每次 mose over 时都会得到重复的 click 事件。

和 $("ul.social li a").click 是错误的，您将点击附加到每个链接，而不仅仅是 $("ul.social").eq (一)

$(document).ready(function() {
    $("ul.social li a").click(function(e){ 
        e.preventDefault();
        var link = this.href;
        window.open(link, " ", "height=350,width=600");
     });
       $("ul.social").hide();
       $("span.link").each(function(i){
         $(this).mouseover(function(){
           $("ul.social").eq(i).show("fast", function(){

           });
         });
       });
     });