我一整天都在尝试在我的项目中测试一个简单的函数。食谱是
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");
});
我正在使用 Safari 在 iPad 2 上进行测试......我担心的是，jQuery mobile 已被弃用，因为
click() 事件效果很好。我已经包含了 http//jquerymobile.com 的源代码，这也不起作用。谢谢!
最佳答案
我认为问题在于，在加载脚本时，DOM 中不存在具有 .item 类的元素。将脚本放在页面末尾或使用 document 将事件处理程序附加到 $(document).on('taphold', 'li.item', function(){ 元素上
我创建了以下工作示例。
<!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/