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函數不運行第一次點擊

回答

相關問題