javascript - jQuery 点击不起作用

Question

我对嵌套 div 和 jQuery 的单击功能有疑问。单击 .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

如果您的 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