Question

有人可以向我解释为什么这不起作用？

对不起，我是javascript + jQuery的首发。

以下是代码：

Javascript / jQuery：

<script type="text/javascript"> 
    $('.clickk').click(function(e){
        window.location.href = $(this).find('a').attr('href');
    });
</script>

HTML：

 <div  class="clickk" >
    <a href="google.com">link</a>
    blah blah blah.
 </div>

请帮我找到我失踪的东西。

提前致谢。希望问题很清楚。

Answer 1

两个可能的问题：

您可能在DOM中存在该类的任何元素之前执行该脚本（更多信息如下）。
href应以http://开头，例如href="http://www.google.com"或href="http://google.com"。只需href="google.com"即可使其成为相对链接，但该链接无法正常运行。

假设您修复了＃2，这里有关于＃1的一些细节：

无效：

<!-- ... -->
<head>
<!-- ... -->
<script type="text/javascript"> 
  $('.clickk').click(function(e){
     window.location.href = $(this).find('a').attr('href');
  });
</script>
</head>
<body>
<!-- ... -->
<div  class="clickk" >
   <a href="http://google.com">link</a>
   blah blah blah.
</div>

有两种方法可以解决这个问题：

将脚本放在页面末尾

这通常是首选方式，将脚本放在页面的 end ，而不是开头。

使用：

<body>
<!-- ... -->
<div  class="clickk" >
   <a href="http://google.com">link</a>
   blah blah blah.
</div>
<!-- ... -->
<script src="jquery.js"></script>
<script type="text/javascript"> 
  $('.clickk').click(function(e){
     window.location.href = $(this).find('a').attr('href');
  });
</script>
</body>

这还可以通过在等待脚本下载时不保持渲染来减少明显的页面加载时间。请参阅YUI's guidelines（或其他几个）。该脚本可以访问定义上面脚本的DOM元素。在脚本下面定义的DOM元素不是（除非你做了类似下面的事情来推迟事情）。

使用`ready`事件

如果出于某种原因将脚本放在最后并不合适，可以使用ready事件：

使用：

<!-- ... -->
<head>
<!-- ... -->
<script type="text/javascript"> 
  jQuery(function($) {
      $('.clickk').click(function(e){
         window.location.href = $(this).find('a').attr('href');
      });
  });
</script>
</head>
<body>
<!-- ... -->
<div  class="clickk" >
   <a href="http://google.com">link</a>
   blah blah blah.
</div>

请注意，将函数传递到jQuery（或$，这只是jQuery的别名，除非您使用noConflict）与将函数传递到$(document).ready(...)相同{{1}};详情：http://api.jquery.com/jQuery/#jQuery3

Answer 2

使用此

$(document).ready(function(){    
    $('.clickk').click(function(e){
        window.location.href = $(this).find('a').attr('href');}
    });
)});

Answer 3

而不是

 href="google.com" // This is a relative url

尝试

href="http://www.google.com/"  // Instead

也将它包装在DOM ready事件中。也许脚本甚至在元素在DOM之前就被执行了。这样可以确保在元素在DOM中可用之后附加事件。

<script type="text/javascript"> 
 $(function() {
    $('.clickk').click(function(e){
       window.location.href = $(this).find('a').attr('href');
    });
  });
</script>

DEMO

Answer 4

试试这个

使用就绪活动

<script> 
 $(document).ready(function() {
    $('.clickk').click(function(e){
       window.location.href = $(this).find('a').attr('href');
    });
  });
</script>

Answer 5

添加我的两位。您可以使用以下代码。虽然别人给出的答案也应该对你有用（我个人不喜欢使用window.location.href的想法:)）

<script type="text/javascript"> 
$(document).ready(function(){
  $('.clickk').click(function(e){
     $(this).find('a')[0].click();
  });
  });
</script>


<div  class="clickk" style="cursor:pointer">
   <a href="http://google.com">link</a>
   blah blah blah.
 </div>?

jQuery div可点击并关注子URL

5 个答案:

将脚本放在页面末尾

使用`ready`事件

jQuery div可点击并关注子URL

5 个答案:

将脚本放在页面末尾

使用ready事件

使用`ready`事件