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不工作

回答

相关问题