Onclick函数不运行第一次点击

此功能使用动画从滚动到#id滚动并将其着色bg-color颜色几秒钟。Onclick函数不运行第一次点击

这是我用来从导航向下滚动到页面上使用的功能，通过使用它在标签中使用ID <h1 id="#someid">和href="#someid"属性。该功能可以正常工作，但是，在加载页面后第一次点击时不起作用。任何想法如何解决它以及是什么原因造成的？

//EXTERNAL JAVASCRIPT 

function link(){ 
      $('a[href^="#"]').click(function() { 
       var target = $(this.hash); 
       if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]'); 
       if (target.length == 0) target = $('html'); 
       $('html, body').animate({ scrollTop: target.offset().top }, 100); 
       target[0].style.backgroundColor = 'red'; 
       setTimeout(function(){ 
        target[0].style.backgroundColor = 'dodgerBlue'; 
      }, 8000); 
       return false; 
    }); 
}

这是我的HTML，我简单地覆盖锚通过其链接到单击属性我的函数的link();，你可以看到这上面的文字。

//HTML 
<li class="sub-menu-element"><a href="#DERMATOLOG" onclick="javascript:link()">DERMATOLOG</a></li>

任何想法？非常感谢您的帮助球员提前。

来源

2013-03-17 DevWL

小记：你可以调用'if（target.length == 0）'两次。 – zeroflagL 2013-03-17 19:35:04

您正在调用内联javascript中的link()函数，并再次调用link()函数中的click事件。这是没有意义的，并在所有不需要......

试试这个

$(function(){ //call the codes after this when document is ready... 
    $('a[href^="#"]').click(function() { //call the click event 
      var target = $(this.hash); 
      if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]'); 
      if (target.length == 0) target = $('html'); 
      $('html, body').animate({ scrollTop: target.offset().top }, 100); 
      target[0].style.backgroundColor = 'red'; 
      setTimeout(function(){ 
       target[0].style.backgroundColor = 'dodgerBlue'; 

     }, 8000); 
      return false; 
    }); 
});

，并用这个..你不需要的onclick直列太

<li class="sub-menu-element"><a href="#DERMATOLOG">DERMATOLOG</a></li>

来源

2013-03-17 18:42:03 bipen

我可以看到你的观点，但是在这个设置中你提供了动画简单的不工作。就像它根本不会触发这个功能。感谢您试用：* – DevWL 2013-03-17 18:51:43

，因为我们已经从锚标记中删除了直接链接。我们仍然可以使用“this”。？ – DevWL 2013-03-17 19:00:59

是的，你可以......这应该工作....警告里面的单击事件和settimeout函数，看看这个函数是否被调用...看看你是否有任何错误....你可以删除返回false settimeout和和它到下一行..检查我的upadte ..并让我知道 – bipen 2013-03-17 19:05:44

link函数只有设置滚动的东西。所以第二次单击处理程序将被实际执行。

扔掉其错误javascript:语法，内嵌处理器，并投入了

$(document).ready(link);

在加载DOM时将执行调整功能的外部JS。另外，我认为你应该将return false;的第一行从超时移到处理程序。

来源

2013-03-17 18:34:12 Bergi

我已经完成了，因为你问我的朋友不幸的是它没有工作。 Thanks Man – DevWL 2013-03-17 18:52:14

@Wiktor：真的吗？为什么不，你现在得到什么错误？这与Igor和Bipen提供的基本相同。 – Bergi 2013-03-17 20:01:07

它的工作原理; *我有jQuery的参考上面链接的JavaScript文件。你的代码在工作thx男人 – DevWL 2013-03-18 23:21:02

试试这个代码：

$(document).ready(function(e){ 
     $('a[href^="#"]').click(function() { 
      var target = $(this.hash); 
      if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]'); 
      if (target.length == 0) target = $('html'); 
      $('html, body').animate({ scrollTop: target.offset().top }, 100); 
      target[0].style.backgroundColor = 'red'; 
      setTimeout(function(){ 
       target[0].style.backgroundColor = 'dodgerBlue'; 
       return false; 
     }, 8000); 

     }); 
});

来源

2013-03-17 18:53:27

它没有工作我的朋友是因为我已经从锚标记中删除了onClick调用，这找不到链接。也许是“这个”。什么阻止它的工作。罪恶这不是直接从链接调用。 – DevWL 2013-03-17 18:59:25

@WiktorLiszkiewicz：你能告诉我们什么是不正常的？你会得到什么错误？请将您对问题所做的更改也应用。 – zeroflagL 2013-03-17 19:39:49

它简单显示没有错误，但它也不会触发该功能，当你点击一个链接。它跳过动画，跳过h1着色 – DevWL 2013-03-17 20:20:33

$(document).ready(function(){ //call the codes after this when document is ready... 
$('a[id="demo"]').click(function() { //call the click event 
     var target = $(this.hash); 
     if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]'); 
     if (target.length == 0) target = $('html'); 
     $('html, body').animate({ scrollTop: target.offset().top }, 100); 
     target[0].style.backgroundColor = 'red'; 
     setTimeout(function(){ 
      target[0].style.backgroundColor = 'dodgerBlue'; 

    }, 8000); 
     return false;

}）; }）;

<li class="sub-menu-element"><a href="#" id='demo'>DERMATOLOG</a></li>

来源

2013-03-18 07:50:02

工作正常！我只需要交换我的参考订单。首先应该引用jQuery，然后用此代码引用.js文件。 Thanky you guys for help所有的答案都很好。 – DevWL 2013-03-18 16:41:31

Onclick函数不运行第一次点击

回答

相关问题