jQuery Mobile Taphold [英] jQuery Mobile Taphold
问题描述
我整天都在尝试测试我的项目中失效的简单功能.食谱是
I'm trying the whole day to test a dead simple function in my project. The recipe is
- 用户点击并按住列表项
- 出现
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的来源，这也没有用.
I'm testing on an iPad 2 with Safari... My worry is, that jQuery mobile is deprecated, because the click() event works great. I've included the source from http//jquerymobile.com, this also didn't work.
谢谢！
推荐答案
我认为问题在于在脚本加载时DOM中不存在具有.item类的元素.将脚本放在页面的末尾，或使用$(document).on('taphold', 'li.item', function(){
I think that the problem is that the elements with .item class do not exist in DOM at the time your script is loaded. Put the script at the end of your page or attach the event handler on the document element using $(document).on('taphold', 'li.item', function(){
我创建了以下工作示例.
I've created the below working examples.
<!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元素上附加事件处理程序的示例:
and an example which attaches an event handler on the document element:
<!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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
