Onclick 功能不运行第一次点击答案

【问题标题】：Onclick function don't run first clickOnclick 功能不运行第一次点击
【发布时间】：2013-03-17 18:27:30
【问题描述】：

此功能使用动画从导航滚动到#id，并将其着色为 bg-color 颜色几秒钟。

这是我用来从导航向下滚动到页面上使用的内容的功能，方法是在锚标记中使用 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，我只是通过将锚点 onclick 属性链接到我的函数的 link(); 来覆盖它，您可以在此文本上方看到它。

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

有什么想法吗？非常感谢您提前提供的帮助。

【问题讨论】：

一个小提示：你给if (target.length == 0)打了两次电话。

标签： javascript jquery html

【解决方案1】：

您正在从内联 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>

【讨论】：

我可以理解您的观点，但是在这组中您提供的动画简单不起作用。喜欢它根本不会触发此功能。感谢您的尝试：*
既然我们已经从锚标签中删除了直接链接.. 我们还可以使用“this”吗？ ?
是的，你可以......这应该可以工作......在点击事件和 settimeout 函数中发出警报，看看是否调用了这个函数......看看你是否收到任何错误......你可以从 settimeout 中删除 return false 并将其移至下一行.. 检查我的更新 .. 并告诉我
我很抱歉 :) 你的代码是对的 :) 我在 jquery 参考上方链接了 javascript 文件。您的代码有效。谢谢！ :)

【解决方案2】：

link 函数只设置滚动的东西。因此，在第二次单击时，将实际执行处理程序。

用错误的javascript: 语法扔掉那个内联处理程序，然后放一个

$(document).ready(link);

在您的外部 js 中，它将在 DOM 加载时执行设置功能。另外，我认为您应该将return false; 第一行从超时移到处理程序。

【讨论】：

我已经按照你对我朋友的要求做了，不幸的是它没有用。谢谢人
@Wiktor：真的吗？为什么不呢，你现在得到什么错误？这与 Igor 和 Bipen 提供的基本相同。
它有效；* 我在 jquery 参考上方链接了 javascript 文件。您的代码正在运行 thx man

【解决方案3】：

试试这个代码：

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

      });
});

【讨论】：

它不起作用我的朋友就像我已经从锚标签中删除了一个 onClick 调用，所以找不到链接。也许就是“这个”。是什么阻止了它的工作。罪恶这不再是直接从链接调用。
@WiktorLiszkiewicz：你能告诉我们究竟是什么不工作吗？你得到什么错误？请同时应用您对问题所做的更改。
它简单地显示没有错误，但当您单击链接时它也不会触发该功能。它跳过动画并跳过 h1 着色
您是否尝试在此行添加事件信息？ $('a[href^="#"]').click(function() { 试试把这个 $('a[href^="#"]').click(function(e) {

【解决方案4】：

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

【讨论】：

工作正常！我只需要交换我的参考订单。首先应该引用 jQuery，然后使用此代码引用 .js 文件。谢谢大家的帮助，所有答案都很好。