0

我有带有 2 个 JQM 页面的简单 html：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test table</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script>
        $(function(event, ui) {
            console.log('Whole document (+page 1) ready');
        });

        // Unreachable - doesn't matter which event is "on"
        $('#page_test2').on('pagecreate', function(event, ui) {
            console.log('Page 2 create event fired');
        });
    </script>
</head> 
<body>
    <div data-role="page" id="page_test1">
        <div data-role="content">
            <a href="#page_test2" data-role="button">Open next page</a>
        </div>
    </div>
    <div data-role="page" id="page_test2">
        <div data-role="content">
            <a href="#" data-role="button" data-rel="back">Return to first page</a>
            <div id="place">
            </div>
        </div>
    </div>
</body>
</html>

发现使用“on”未到达 page2 事件处理程序。怎么了？在这里，我发现了许多答案很不清楚的长主题。

4

2 回答 2

2

将事件侦听器应用于文档：

$(document).on('pagecreate', '#page_test2', function() {
    //...
});
于 2013-04-19T17:53:36.350 回答
1

当您注册事件时，该#page_test2div 不存在。您需要将事件注册包装在$(document).ready()调用中，以便在设置事件时拥有所有 DOM 元素。

像这样：

$(document).ready(function() {
 $('#page_test2').on('pagecreate', function(event, ui) {
            console.log('Page 2 create event fired');
        });
});

您还可以将代码移动到 div 的声明下方，这样它们在执行 javascript 时出现在 DOM 中。

于 2013-04-19T17:50:59.523 回答