0

我是 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'); 
});

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

4

1 回答 1

2

我想问题是在您的代码调用.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>
于 2012-11-19T19:07:50.233 回答