jQuery单击不起作用

Question

嵌套div和jQuery的click函数都存在问题。 单击.header-fb，.header-twitter或.header-linkedin没有任何结果。 控制台中没有错误。 我不确定发生了什么。 这些类具有背景图像，不确定是否也造成问题。 这是代码：

<div>
 <div id="header-social" class="four columns mobile-two">
 <div class="header-fb"><a href="http://www.facebook.com" >&nbsp</a></div>
 <div class="header-twitter"><a  href="https://twitter.com" >&nbsp</a></div>
 <div class="header-linkedin"><a  href="http://www.linkedin.com/">&nbsp</a></div>
</div>

和javascript：

 <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery(".header-fb").click(function(){
                  window.location=jQuery(this).find("a").attr("href");
                  return false;
            });
            jQuery(".header-twitter").click(function(){
                window.location=jQuery(this).find("a").attr("href");
                return false;
            });
            jQuery(function() {
                jQuery('.header-linkedin').click(function(){
                    window.location=jQuery(this).find("a").attr("href");
                    return false;
                });
            });
        });
    </script>

Answer 1

如果您尝试：

$(function() {

   $(".header-fb").click(function(){
      window.location = $(this).find("a").attr("href");
   });

   $(".header-twitter").click(function(){
      window.location= $(this).find("a").attr("href");
   });

   $('.header-linkedin').click(function(){
      window.location = $(this).find("a").attr("href");
   });

});

您出于某种原因在代码底部添加了一个额外的jQuery方法，并使用了很多惯用的语法。 您也不需要返回false 。

Answer 2

如果您的HTML应该如下所示：

<div id="header-social" class="four columns mobile-two">
   <div class="header-fb"><a href="http://www.facebook.com" >&nbsp</a></div>
   <div class="header-twitter"><a  href="https://twitter.com" >&nbsp</a></div>
   <div class="header-linkedin"><a  href="http://www.linkedin.com/">&nbsp</a></div>
</div>

比您可以尝试：

(function( $ ){  // remap $ to jQuery
  $(function(){  // DOM ready shorthand

    $('#header-social').on('click','div',function(){

       var goTo = $(this).find('a').attr('href');
       window.location = goTo ;

    });

  });
})( jQuery );

http://jsbin.com/uxowoj/1/edit