jquerymobile 点击事件不起作用答案

【问题标题】：jquerymobile click event doesn't workjquerymobile 点击事件不起作用
【发布时间】：2012-11-07 17:36:31
【问题描述】：

我是 JqueryMobile 的新手。我想在一个按钮上尝试一个简单的点击事件，但它不起作用（我在firefox中使用它）

HTML 是

<!DOCTYPE html>
<html dir='ltr'>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="/css/style.css"/>
<script src='js/jquery.mobile.js'></script>
<script src='js/script.js'></script>
</head>
<body> 
    <div data-role="page" id='mypage'>  
        <button id='load_ajax'>Carica</button>
        <br />
        <div id='content'></div>
    </div><!-- /content -->
</body>
</html>

而script.js中的脚本是

$('#mypage').delegate('#load_ajax','click',function (e) {
    alert('test'); 
});

即使使用调试器，也不会弹出警报。

【问题讨论】：

标签： jquery events jquery-mobile click

【解决方案1】：

我认为问题在于当您的代码调用 .delegate() 时页面上不存在所选元素。此外，请检查 JS 文件是否正确加载。

包含您发布的代码的以下代码可以正常工作：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    </head> 
    <body>
        <!-- /page -->
        <div data-role="page" id='mypage'>  
            <div id='content'>
                <button id='load_ajax'>Carica</button>
            </div>
        </div>
        <script type="text/javascript">
            $('#mypage').delegate('#load_ajax','click', function (e) {
                alert('test'); 
            });
        </script>
    </body>
</html>

此外，如 jQuery API 中所述：

从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。然而，对于早期版本，它仍然是使用事件委托的最有效方法。

事件处理程序仅绑定到当前选定的元素，并且在您的代码调用 .on() 时它们必须存在于页面上 。为确保元素存在并且可以被选择，在文档就绪处理程序中执行事件绑定，以对页面上 HTML 标记中的元素。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件附加事件处理程序。

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。 在加载任何其他 HTML 之前，文档元素在文档头部是可用的，因此可以安全地在此处附加事件而无需等待文档准备好。

阅读以上内容后，您可能会考虑将代码更改为：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script type="text/javascript">
            $(document).on('click', '#load_ajax', function(e){
                // your code
                alert($(this).text());
            });
        </script>
    </head> 
    <body>
        <!-- /page -->
        <div data-role="page" id='mypage'>  
            <div id='content'>
                <button id='load_ajax'>Carica</button>
            </div>
        </div>
    </body>
</html>

【讨论】：

我认为这个解决方案有效，因为它调用 jquery-1.7.2。如果您删除该库，它将不再起作用。这是必要的吗？我认为 jquerymobile 不需要 jquery。
您可以阅读jquerymobile.com/demos/1.2.0/docs/about/getting-started.html 并查看jquerymobile.com/download。如果删除 jQuery，则无法在 jQuery Mobile JS 文件中解析 $ 符号。