スワイプされたリスト要素のIDを取得するJquery Mobile

Question

リスト項目のIDをスワイプできないようです！

は、ここにコードを参照してください：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>

Answer 1

回のほとんどは、event.targetはliが、その子要素の一つではないからであること。

の1- eventがハンドラ関数に渡されませんでした。

は、他のミスがありました。

この：$(document).on("pagecreate","#pageone",function(){
は次のようになります。$(document).on("pagecreate","#pageone",function(event){あなたが複数の要素に同じidを使用することはできません

2 - 。

3- </ul>がありませんでした。

そして、最初にliがこの（「ピックアップ」行で）トリガーするための除外を追加しました。コンソールを見れば

ので以下のスニペットでは、あなたはイベントとそれを扱う親liのidをトリガーevent.target.tagNameが表示されます。

liの$(this)を使用すると、その子の1つによってトリガーされたイベントをキャッチできます。

$(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>