我一整天都在尝试在我的项目中测试一个非常简单的功能。配方是
- 用户点击并按住列表项
- 出现
alert()。
我的标记是
...
<body>
<ul>
<li class="item ...">Hello, I'm an item</li>
...
</ul>
</body>
<script src="jquery.js"></script>
<script src="jquery.mobile.js"></script>
...
我的脚本是
$('.item').on("taphold", function() {
alert("hello");
});
我正在 iPad 2 上使用 Safari 进行测试...我担心 jQuery mobile 已被弃用，因为 click() 事件效果很好。我已经包含了来自 http://jquerymobile.com 的源代码，但这也不起作用。
谢谢!
最佳答案
我认为问题在于加载脚本时 DOM 中不存在 .item 类的元素。将脚本放在页面末尾或使用 $(document).on('taphold', 'li.item', function(){ 将事件处理程序附加到 document 元素上
我创建了以下工作示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Taphold event demo</title>
<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.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div id="tap-page" data-role="page">
<div data-role="header">
<h1>Long-press (taphold) a list item</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li class="item">Hello, I'm an item</li>
<li class="item">Hello, I'm another item</li>
</ul>
</div>
</div>
<script>
$(function(){
$('li.item').bind( 'taphold', tapholdHandler );
function tapholdHandler( event ){
alert('Hello');
}
});
</script>
</body>
</html>
以及在 document 元素上附加事件处理程序的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Taphold event demo</title>
<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.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(document).on( 'taphold', 'li.item', tapholdHandler );
function tapholdHandler( event ){
alert('Hello');
}
</script>
</head>
<body>
<div id="tap-page" data-role="page">
<div data-role="header">
<h1>Long-press (taphold) a list item</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li class="item">Hello, I'm an item</li>
<li class="item">Hello, I'm another item</li>
</ul>
</div>
</div>
</body>
</html>
关于jQuery Mobile Taphold，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17252127/