Click here to Skip to main content
15,883,458 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Just learning JS but I've got this simple HTML, using JQuery, with embedded JS, that works fully in latest Chrome but not in IE11?

  <link rel='stylesheet' type='text/css' href='css/styles.css'>
  <script type='text/javascript' src='jquery.js'></script>
  <script type='text/javascript'>
  function main() {
  $('.projects-button').on('click', function() {
    $(this).text('Projects Viewed');
  <h1>Proficient in:</h1>
  <div class='skillset'>
    <div class='skill-html'>
      <h1>HTML & CSS</h1>
      <p class='description'>
        <div class='projects-button'>Recent Projects</div>
        <ul class='projects'>

    <div class='skill-js'>
      <p class='description'>
        <div class='projects-button'>Recent Projects</div>
        <ul class='projects'>
          <li>Password Validator</li>
          <li>Whale Talk</li>

    <div class='skill-jquery'>
      <p class='description'>
        <div class='projects-button'>Recent Projects</div>
        <ul class='projects'>
          <li>Coming soon...</li>
<script type='text/javascript'>

CSS file ...
body {
  font-family: Helvetica;
  padding: 2em;
  background-color: whitesmoke;

h1 {
  font-size: 2.5em;

.skillset {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

.skill-html {
  background-color: #E55126;

.skill-js {
  background-color: #E5A227;

.skill-jquery {
  background-color: #0C73B8;

.skill-jquery {
  width: 100%;
  padding: 1em 3em 2em 2em;
  margin: 0.5em;
  color: whitesmoke;

.projects-button {
  padding: 0.75em 1.25em;
  background-color: whitesmoke;
  opacity: 0.9;
  width: 10em;
  color: black;

ul {
  list-style: none;
  padding: 0;

.projects {
  margin: 1em 0;

.active {
  background-color: #333333;
  color: whitesmoke;

What I have tried:

nothing because I don't know why one browser works and another does not.
Updated 13-Feb-20 12:03pm
jsc42 10-Oct-18 7:53am    
How are you invoking the page? If you have it locally and are double-clicking its filename from Windows Explorer or right-clicking and using 'Run Using ...', it will load with a 'file:' protocol. This does not seem to be honoured in Edge but is honoured in Chrome. I do not know if it works in IE11 - it used to work in earlier versions of IE. If you are running it through a web server, then I cannot help.
ninjaef 10-Oct-18 8:22am    
It is running from local disk. Double clicking it. But have also entered the full C:\test\index.html in the nav bar in IE, same behaviour - it doesnt work (in IE) but is flawless in chrome.
I'm using IE11
ninjaef 10-Oct-18 8:27am    

<meta http-equiv="X-UA-Compatible" content="IE=edge">

at the top of the HTML file, but can someone explain what this is doing. I found the solution just goolging tens of "jquery not working IE"

however, this is legacy stuff for IE11 and so I switched to the following, but it still didnt work. Only the meta tag works:

<!doctype html>
Mohibur Rashid 10-Oct-18 8:45am

Serious question, what's the version of your browser
Richard Deeming 11-Oct-18 9:27am    
Your page is being forced into an IE compatibility mode for some reason, which makes it behave like an old version of IE. Adding the meta tag forces it back into IE11 mode.

At a guess, you're using a version of jQuery which doesn't support older versions of IE. The current version only supports IE9 or later[^], so if your page was rendering in IE7 mode, it wouldn't work.

When you have a problem with the Javascript code on your page, press F12 to open the developer tools. The debugger will show you the details of any script errors.

1 solution

ninjaef - your solution saved me days of work! Brilliant work! thanks.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900