0

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

对不起，我是 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>

请帮我找到我所缺少的。

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

4

5 回答 5

7

两个可能的问题：

  1. 您可能在 DOM 中存在具有该类的任何元素之前执行该脚本（更多内容见下文）。

  2. 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>

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

将脚本放在页面末尾

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

作品：

<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 的指南（或其他任何指南）。该脚本可以访问在脚本上方定义的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（或 into ，除非您使用，否则$它只是一个别名）与将函数传递给;是相同的。详情：http ://api.jquery.com/jQuery/#jQuery3jQuerynoConflict$(document).ready(...)

于 2012-09-30T10:04:45.110 回答
0

用这个

$(document).ready(function(){    
    $('.clickk').click(function(e){
        window.location.href = $(this).find('a').attr('href');}
    });
)});
于 2012-09-30T09:59:16.980 回答
0

代替

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

尝试

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

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

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

演示

于 2012-09-30T09:59:25.250 回答
0

试试这个

使用就绪事件

<script> 
 $(document).ready(function() {
    $('.clickk').click(function(e){
       window.location.href = $(this).find('a').attr('href');
    });
  });
</script>
于 2012-09-30T10:01:33.240 回答
-1

只需添加我的两个位。您可以使用以下代码。虽然其他人给出的答案也应该对你有用（我个人不喜欢使用 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>?
于 2012-09-30T10:29:10.203 回答