Javascript/jQuery onclick不工作

我做了一個test.html文檔來測試腳本。不知何故，它不工作，我不明白爲什麼沒有發生。該腳本是在 - 標籤和包裹-tag和CSS也有它的標籤。爲什麼它不工作？這裏是因爲你的結合事件處理程序代碼的元素之前執行的代碼Javascript/jQuery onclick不工作

<!DOCTYPE html> 
<html> 

    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
     </script> 
     <script> 
     $('#menu li a').on('click', function() { 
      $('li a.current').removeClass('current'); 
      $(this).addClass('current'); 
     }); 
     </script> 
     <style> 
     .current { 
      text-decoration: underline; 
     } 

     ul { 
      list-style-type: none; 
     } 

     a { 
      text-decoration: none; 
     } 
     </style> 
    </head> 

    <body> 
     <div id="menu"> 
      <ul> 
       <li><a id="about-link" class="current" href="#">ABOUT</a></li> 
       <li><a id="events-link" href="#">EVENTS</a></li> 
       <li><a id="reviews-link" href="#">REVIEWS</a></li> 
       <li><a id="contact-link" href="#">CONTACT</a></li> 
      </ul> 
     </div> 
    </body> 

</html>

來源

2015-08-26 Marcel Wasilewski

存在於DOM，事件未結合的元件上。

爲了解決這個問題，你可以

總結你的代碼ready()回調，這樣當DOM完成加載
將你的腳本的<body>結束你的代碼會被執行，因此，所有的元素都出現在DOM，你可以綁定設備上的事件

代碼：

$(document).ready(function() { 
    $('#menu li a').on('click', function() { 
     $('li a.current').removeClass('current'); 
     $(this).addClass('current'); 
    }); 
});

編輯

您還可以使用load（不推薦）事件回調到綁定事件，但是這將等待所有的資源完全加載。

如果你想使用香草Javascript，你可以使用DOMContentLoaded事件document。

來源

2015-08-26 09:31:30 Tushar

注：* bind *的過去式* * bound *（not * binded *）。即「事件不在元素上」 –

更好。這似乎是SO :)上最常見的語法錯誤:)也表明您可以簡單地將代碼移動到元素之後。 –

@TrueBlueAussie將記住 – Tushar

在DOM內容加載之前，您正在執行代碼。將您的代碼放在一個準備好的塊中。

來源

2015-08-26 09:32:10 atinder

*或者*只是將代碼放在它引用的元素之後...（body的結尾是最常見的地方） –

您正在執行加載<body>標記之前的JavaScript，其中包含您的<li>元素。

爲了解決這個問題，你有三種選擇：

1.You可以插入你已經寫了一個$(document).ready()回調中的JavaScript代碼。（見http://www.w3schools.com/jquery/event_ready.asp瞭解更多信息）

代碼：

$(document).ready(function() { 
$('#menu li a').on('click', function() { 
    $('li a.current').removeClass('current'); 
    $(this).addClass('current'); 
    }); 
});

2.You可以使用JavaScript的內置window.onload功能。（見https://thechamplord.wordpress.com/2014/07/04/using-javascript-window-onload-event-properly/瞭解更多信息）

代碼：

window.onload = function() { 
$('#menu li a').on('click', function() { 
    $('li a.current').removeClass('current'); 
    $(this).addClass('current'); 
    }); 
}

3.Place您<script>標籤之前</body>標籤在你的頁面。

代碼：

<head> 
    <style> 
    .current { 
     text-decoration: underline; 
    } 

    ul { 
     list-style-type: none; 
    } 

    a { 
     text-decoration: none; 
    } 
    </style> 
</head> 

<body> 
    <div id="menu"> 
     <ul> 
      <li><a id="about-link" class="current" href="#">ABOUT</a></li> 
      <li><a id="events-link" href="#">EVENTS</a></li> 
      <li><a id="reviews-link" href="#">REVIEWS</a></li> 
      <li><a id="contact-link" href="#">CONTACT</a></li> 
     </ul> 
    </div> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
    </script> 
    <script> 
    $('#menu li a').on('click', function() { 
     $('li a.current').removeClass('current'); 
     $(this).addClass('current'); 
    }); 
    </script> 
</body>

注：使用$(document).ready()比使用window.onload一個更好的選擇。（有關更多信息，請參見window.onload vs $(document).ready()）

來源

2015-08-26 10:34:27 Arjun

您的代碼沒問題。只需將它包裝在DOM準備就緒，你就可以走了。

$(document).ready(function(){ 
    $('#menu li a').on('click', function() { 
     $('li a.current').removeClass('current'); 
     $(this).addClass('current'); 
    }); 
})

來源

2015-09-10 07:12:26

Javascript/jQuery onclick不工作

回答

相關問題