单击时弹出的窗口重复

Question

I have this 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");
             });
           });
         });
       });
     });

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

But, whenever i click on (ul.social li a) , he's duplicate the window. one of these opens at size 600x350 and the other opens full screen.

Why this happen?

Answer 1

It's because when you click on that link, it is doing the default action of opening the link, like it normally would, and then it's opening it again with your window.open code. So just add event.preventDefault() so that it stops the first opening from happening.

 $("ul.social li a").click(function(event){
               event.preventDefault();
               var link = this.href;
               window.open(link, " ", "height=350,width=600");

Answer 2

Its because, the default action of <a> is not prevented, due to which even after opening the popup, the link opens in a new tab.

Try this.

 $("ul.social li a").click(function(e){
   e.preventDefault();
   var link = this.href;
   window.open(link, " ", "height=350,width=600");
 });

For further info, refer this

Answer 3

dont attach click event inside moseover event , u will get duplicated click event every time you mose over.

and $("ul.social li a").click is wrong , you are attaching a click to every link and not just $("ul.social").eq(i)

$(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(){

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