有关jsp中onclick事件无效的原因，以及jsp中页面加载顺序的问题

最新推荐文章于 2023-11-25 10:41:29 发布

原创最新推荐文章于 2023-11-25 10:41:29 发布 · 7.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jsp

js 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了一种常见的JSP页面中onclick事件无法触发的情况，并详细解释了问题产生的原因及解决方案。通过调整函数定义的位置，使事件能够正常响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在写jsp页面时遇到一个有关onclick事件无效的问题，在这里分享一下：

   <body>
  <div>
   <input type="text" id="name"/>
  </div>
  <div id="hint">
   <ul id="ul" >
    <li onclick="voluation();">aa</li>
   </ul>
  </div>
  </body>
     <script type="text/javascript">
    $(function()
    {
        function voluation()
        {
            alert("方法被调用");
        }
    });  
  </script>

如上代码发现绑定的onclick事件怎么都不能被触发，最后发现voluation()函数写在 $(function())中了，为什么写在里面就调用不到了呢，这是因为$ (function())是在页面加载完的情况下才会执行里面的方法，也就是说在onclick事件上绑定的这个函数是不存在的。

只需要把voluation()函数定义到外面就可以了

  <body>
  <div>
   <input type="text" id="name"/>
  </div>
  <div id="hint">
   <ul id="ul" >
    <li onclick="voluation();">aa</li>
   </ul>
  </div>
  </body>
     <script type="text/javascript">
    $(function()
    {

    });  
    function voluation()
    {
        alert("方法被调用");
    }
  </script>

那么问题又来了jsp是从上至下执行，为什么voluation()函数在绑定事件的下面也会被绑定上呢？这是因为页面加载过程中，浏览器会对页面上或载入的每个js代码块(或文件)进行扫描，如果遇到定义式函数，则进行预处理，处理完成之后再开始由上至下执行；遇到赋值式函数，则只是将函数赋给一个变量，不进行预处理，待调用到的时候才进行处理。