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

如果你尝试怎么办：

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

jQuery单击不起作用

2 个答案: