2017-03-01 65 views
0

我似乎無法獲得swiped列表項的ID!獲取滑動列表元素的ID Jquery Mobile

見代碼在這裏: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>

回答

1

這是因爲,大部分的時間中,event.target不是li,但其子元素之一。

有其他錯誤:

1的event沒有傳遞到處理函數。

這樣:$(document).on("pagecreate","#pageone",function(){
應該是:$(document).on("pagecreate","#pageone",function(event){

2 - 你不能對多個元素使用相同的id

3-丟失了</ul>

而且我在第一個li上添加了一個排除項(「Pick Up」行)。

所以在下面的片段,如果你看一下控制檯,你會看到它會觸發事件並處理它的父liidevent.target.tagName

li上使用$(this)可以讓您捕獲其子項之一觸發的事件。

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