介绍
首先，mobileinit事件不应该用于事件绑定。虽然它可以像mobileinit那样使用，但并不是为此目的而创建的。它是为 jQuery Mobile 参数自动初始化而创建的，因此不应用于事件绑定。
正确的方法是使用适当的页面事件，例如pageinit。有关页面事件的更多信息，请查看我的其他答案，其中涵盖了各种 jQuery Mobile 页面事件及其与通常的 jQuery 文档就绪范例的区别：jQuery Mobile: document ready vs page events。
不让我回答这个问题。像点击这样的事件可以通过几种不同的方式进行绑定。让我们看一下您使用过的示例：
jQuery的各种事件绑定方式
第一个例子
$(document).on('click', '#one1', function(e){
console.log('firing');
});
第一个示例是新的东西，首先使用现在已弃用的方法live。基本上，它是一种事件委托机制，允许您不仅将事件处理程序绑定到给定节点类型的所有现有实例，而且还绑定到给定节点类型的任何未来实例（“类型”是指一组 DOM 节点匹配给定的 jQuery 选择器）。我在这里想说的是，在事件绑定期间，该元素不需要存在于 DOM 中，基本上这种方法通过将事件处理程序绑定到文档本身，然后对通过 DOM 冒泡的所有事件做出反应。因此，在事件绑定期间元素 #one1 是否存在并不重要。您可以稍后动态创建它，它仍然可以工作。
第二个例子
$('#one1').on("click", function() {
console.log('not firing');
});
这是旧的事件绑定方式。它要求事件在绑定事件之前存在于 DOM 中。在您的情况下，您试图将此单击事件绑定到当时 DOM 中不存在的元素。在绑定过程之后加载它并不重要。
工作示例
jsFiddle 示例：http: //jsfiddle.net/Gajotres/QmNsa/
看看这个例子。在 jQuery Mobile 中，您将看到 5 种不同的点击事件绑定方式：
- 2点击事件绑定在HEAD中，页面初始化到DOM之前
- 2个click事件在pagebeforeshow事件中绑定在HEAD中，基本上这也是绑定的委托，因为当页面即将显示并且已经在DOM中时绑定了事件
- 1 个点击事件在所有页面内容之后绑定在一个 BODY 中。因为此时所有内容都加载到 DOM 中，所以这个 click 事件会起作用。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<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/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(document).on('click', '#one1', function(e){
// This example will work because it was bind with event delegation process
console.log('Firing 1');
});
$('#one1').on("click", function() {
// This example will not work because event do not exist in this moment
console.log('Not firing');
});
$(document).on( "pagebeforeshow", function() {
// This example will work because it was bind with event delegation process
$(document).on('click', '#one1', function(e){
console.log('Firing 2');
});
// This example will work because element exist in a DOM during the pagebeforeshow event
$('#one1').on("click", function() {
console.log('Firing 3');
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<a href="#" id="one1" data-role="button">[one]</a>
</div>
</div>
<script>
$('#one1').on("click", function() {
// This example will work because we are binding it when element is already loaded into the DOM
console.log('Firing 4');
});
</script>
</body>
</html>
结论
- 不要使用 mobileinit 事件进行事件绑定，它会在页面加载到 DOM 之前触发，并且只有通过委托绑定的事件才会起作用。
- 将您的事件绑定在正确的 jQuery Mobile 页面事件中。
有关此主题的有用链接：
jQuery Live() 方法和事件冒泡
虽然不推荐使用 live 方法，但应该使用方法。在某些基准测试中，方法的速度要快 2 倍。
jQuery Mobile：文档就绪与页面事件
- 各种 jQuery Mobile 页面事件
- “事件冒泡”是什么意思？