CODEWITHSUNDEEP
jqueryhtml-listsswipe
user1724365
user1724365

Reputation: 97

Getting id of a swiped list element Jquery Mobile

I cannot seem to get the id of the list item swiped!

See the Code here: https://www.w3schools.com/code/tryit.asp?filename=FD82HCGZJ2PE

<script>
$(document).on("pagecreate","#pageone",function(){
  $("li, ul").on("swipe",function(){
  alert(event.target.id);
   });                       
});
</script>
<div data-role="page" id="pageone">
  <div data-role="header">
<h1>The swipe Event</h1>
  </div>
  <ul data-role="listview" data-inset="true" data-theme="b" data-divider-theme="a" data-count-theme="a">
<li data-role="list-divider">Pick Ups <span class="ui-li-count">1</span></li>

<li id="B3">
  <a href'ride_details.php?TripID=15'>
    <h2 id="h2">Some Rider</h2>
    <p><strong>555 code lane Freedy, Texas 75035</strong></p>
    <p>Jon Doe</p>
  </a>
</li>  
<li id="B3"><a href'ride_details.php?TripID=15' id="2">
  <h2>Some Rider</h2>
  <p><strong>555 code lane Freedy, Texas 75035</strong></p>
  <p>Jon Doe</p>
  </a>
</li>   
  
  <div data-role="footer">
<h1>Footer Text</h1>
  </div>
</div>

Upvotes: 0

Views: 488

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

That is because, most of the times, the event.target is not the li, but one of its child element.

There was other mistakes:

1- The event wasn't passed to the handler function.

this: $(document).on("pagecreate","#pageone",function(){
should be: $(document).on("pagecreate","#pageone",function(event){

2- You can't use the same id on multiple elements.

3- There was an </ul> missing.

And I've added an exclusion for the first li to trigger on this (the "Pick Ups" line).

So in the snippet below, if you look at the console, you will see the event.target.tagName which triggered the event AND the id of the parent li which handles it.

Using $(this) on the li enables you to catch the event that was triggered by one of its child.

$(document).on("pagecreate","#pageone",function(){
  $("ul li").not(":first").on("swipe",function(event){
    console.log("event target element: "+event.target.tagName);
    console.log("li id: "+$(this).attr("id") );
  });                       
});
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>



<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>The swipe Event</h1>
  </div>
  <ul data-role="listview" data-inset="true" data-theme="b" data-divider-theme="a" data-count-theme="a">
    <li data-role="list-divider">Pick Ups <span class="ui-li-count">1</span></li>

    <li id="firstRider"><a href'ride_details.php?TripID=15'>
      <h2 id="h2">First Rider</h2>
      <p><strong>555 code lane
        Freedy, Texas 75035</strong></p>
      <p>Jon Doe</p>
      </a>
    </li>  
    <li id="secondRider"><a href'ride_details.php?TripID=15' id="2">
      <h2>Second Rider</h2>
      <p><strong>555 code lane
        Freedy, Texas 75035</strong></p>
      <p>Jon Doe</p>
      </a>
    </li>   
  </ul>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>

Upvotes: 1

Related Questions