单击按钮时调用脚本答案

【问题标题】：Calling a Script when button clicked单击按钮时调用脚本
【发布时间】：2010-11-24 10:31:39
【问题描述】：

在 jquery 移动网页中，我想调用在 jsp 的 HEAD 部分的脚本标签中定义的脚本。

<head>

    <link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile-1.0a1.min.css" />
    <script type="text/javascript" src="jquerymobile/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="jquerymobile/jquery.mobile-1.0a1.min.js"></script>

    <script>

        $("#button").click( function()
           {
             alert('button clicked');
           }
        );
    </script>

</head>

<body>
    <html:errors/>

    <div data-role="page" data-theme='a'>

      <div data-role="header">
        <h1>jquerymobile</h1>
      </div>

      <div data-role="content">
        <div id="button" data-role="button">Click on button</div>
      </div>

   </div>
</body>

当点击按钮时，我希望显示警报。但是点击按钮时什么也没有发生。

谁能告诉我哪里出错了？

EDIT1：

以下代码在 Firefox 和 Opera 桌面浏览器 中显示警报。

  $(document).ready(function() {
      $("#vbutton").click(function() {
          alert("clicked");
      });
  });

  <a id="vbutton" data-role="button">Click Button</a>

同样的不与 Opera Mobile 和 Fennec 浏览器一起工作的任何原因 - 它显示 错误加载页面对话？？

【问题讨论】：

只是一个猜测（因此是评论而不是答案）：移动浏览器可能不支持对不可聚焦的元素（例如 div）的 onclick 事件。您是否尝试过（真实的）<button> 或链接？
data-role="button" 生成一个可以点击的真实按钮。
您是否尝试过使用<button> 元素或链接？ jQuery Mobile Docs 说它们也可以使用，对我来说，实际使用 <button> 作为按钮更有意义。（但也许这只是我。）

标签： javascript jquery browser jquery-mobile

【解决方案1】：

您的问题是您在 $('#button') 存在之前搜索它...

尝试将您的 jQuery 代码包装在 $(document).ready(function(){ ... }) 或其简写别名 jQuery(function(){}) 中

另一个选项是在按钮上包含单击事件的初始化，直到在 DOM 中存在 #button 之后。换句话说，您可以将<script> 标记移到页面底部，它应该可以工作。

【讨论】：

感谢您的回复 gnarf。我有 2 个问题： 1. 使用 $(document).ready(function(){.....})，警报会在 Firefox 和 Opera 桌面浏览器中弹出。但是有什么原因为什么同样不适用于 Opera Mobile 和 Fennec 浏览器 - 它显示错误加载页面对话框？这很重要，因为我在移动网站（不是桌面网站）上工作。 2. 我应该把

【解决方案2】：

问题是由于调试语句引起的

调试器；

debug.info(....)

Firefox/Firebug 可以理解，但在 Fennec 和 Opera 移动浏览器中导致问题。

【讨论】：

很高兴知道，但这个答案对人们来说毫无用处。您应该已将其他答案标记为已接受。