Can you please help me to locate on which element “taphold” is fired by using JS, jQuery, or jQuery Mobile?
My HTML structure is like the below
JavaScript
x
17
17
1
<script>
2
$(document).on("pagecreate", function () {
3
$("#myFilesListView").bind('contextmenu', function (event) {
4
event.preventDefault();
5
event.stopPropagation();
6
return false;
7
});
8
});
9
$(document).ready(function () {
10
$("#myFilesListView").bind("taphold", function (event) {
11
event.preventDefault(false);
12
event.stopPropagation();
13
var ID = $(this).child().attr("id");
14
alert(ID);
15
});
16
});
17
</script>
JavaScript
1
14
14
1
<div data-role="page" id="page1">
2
<div data-role="header"></div>
3
<div data-role="main">
4
<ul data-role="listview" id="mylistview">
5
<li class="mydata" id="1"> some conetent</li>
6
<li class="mydata" id="2"> some conetent</li>
7
<li class="mydata" id="3"> some conetent</li>
8
<li class="mydata" id="4"> some conetent</li>
9
<li class="mydata" id="5"> some conetent</li>
10
<!--ids are not in predefined sequences and there may be 100s of list-->
11
</ul>
12
</div>
13
<div data-role="fotter"></div>
14
</div>
In my JavaScript code I am able to prevent the default behavior of taphold, but I am not getting how to get the Id of a particular list as soon as a user tap and hold on that list.
Advertisement
Answer
You can bind the taphold to the li elements instead of the listview:
JavaScript
1
13
13
1
$(document).on("pagecreate", "#page1", function () {
2
$("#mylistview").on('contextmenu', function (event) {
3
event.preventDefault();
4
event.stopPropagation();
5
return false;
6
});
7
8
$("#mylistview li").on("taphold", function (event) {
9
var ID = $(this).prop("id");
10
alert(ID);
11
});
12
});
13