2012-12-18 128 views
2

我已經看過這個其他問題,到目前爲止,我一直沒能解決,我已經得到了這個問題:jQuery Mobile的 - 的ListView - 獲取所選擇的項目

HTML:

 <script type="text/html" id="searchPickPlaceTemplate"> 
       <div class="searchpickwhere_box"> 
        <ul data-role="listview" data-inset="true"></ul> 
       </div> 
     </script> 
     <div id="searchPickPlace"></div> 

我在這裏創建了一個jsfiddle:http://jsfiddle.net/antaeusa/TLGY7/2/ 因爲我在動態添加項目到列表視圖。我也給每個項目一個id來輕鬆識別哪個項目已被點擊,以便我可以將該值傳遞給另一個頁面。

回答

10

您的JavaScript和html文件中有一些錯誤。

在jquery mobile定義一個listview的時候,你必須包含data-role="listview"來定義ul,那樣jquerymobile會明白你想要一個listview而不是一個「普通」列表。

<ul data-role="listview"> 
    <!-- List Elements --> 
</ul> 

你有第二個錯誤是,沒有對HTML中沒有定義data-name屬性,而你試圖用JavaScript來得到它。

$('#searchPickPlace ul').children('li').bind('touchstart mousedown', function(e) { 
    alert('Selected Name=' + $(this).attr('data-name')); 
}); 

這如果所選元素不具有已定義的屬性顯然是行不通的。 所以,你必須定義它的HTML,像這樣:

<div id="searchPickPlace"> 
    <ul data-role="listview"> 
     <li data-name="Remuera"><!-- List element content --></li> 
     <li data-name="Posonby"><!-- List element content --></li> 
    </ul> 
</div>​ 

我修改你的代碼,這裏是完整的解決您的問題,希望它有助於:

http://jsfiddle.net/TLGY7/12/

注意:如果您要動態添加更多元素到列表視圖中,您必須在添加的每個元素上調用$('.selector').listview('refresh');方法。這裏的鏈接到文檔:

http://jquerymobile.com/demos/1.2.0/docs/lists/lists-methods.html

+0

謝謝主席先生。你這個人! – Andrew

+0

請參閱本的jsfiddle:http://jsfiddle.net/antaeusa/fhbjJ/ – Andrew

+0

我不知道什麼是綁定回調到'#restWhere'元素的目的,但對我來說並沒有很多的感'pageshow'事件每當你點擊'#restWhere'元素結合到'document'元素。如果你這樣做,你最終會與綁定到'document'元素幾個'pageshows'事件,每次用戶點擊'#restWhere'元素的時間再增加一個回調。請檢查此解決方案http://jsfiddle.net/fhbjJ/1/還注意''(「#mylist」)。refresh(「listview」);'在它的末尾。並請務必檢查這本書的基本:http://jqfundamentals.com/ – ElHacker

2

我知道我是太晚了答案,但可能有助於其他developers.Even我發現這個鏈接時,我一直在尋找相同的查詢,最後我發現一些爐排和簡單的解決方案。

在這裏我使用靜態數組,但同樣的事情我用動態數組,所以你可以很容易地檢查差異。

我已經使用自定義列表視圖和從HTML 5數據庫(電話差距)檢索數據。因此,移動開發者可以編寫代碼爲波紋管,

function DB_QuerySuccess(tx, results) { 
    console.log("Returned rows = " + results.rows.length); 
    var com_id_array = []; // init array  
    var com_name_array = []; // init array 
    var com_img_array = []; // init array 

    //this will return user_id if user exist else return "no user" 
    if (!results.rowsAffected) 
    { 
     for (var index = 0; index < results.rows.length; index++) 
     { 
      var item = results.rows.item(index); 
      var com_id = item.com_id; // company id 
      var com_name = item.com_name; // company name 
      var com_photo = item.com_photo; // company name 
      com_id_array.push(com_id); 
      com_name_array.push(com_name); 
      com_img_array.push(com_photo); 

       $('#ls_com_list').append('<li><img id="com_img" src="'+ com_img_array[index] +'" width="100px" height="100px"/><h3>'+com_name_array[index]+'</h3><p>'+com_id_array[index]+'</p><div align="right"><img src="img/add_icon.png" width="20px" height="20px"/><img src="img/icon-action-close.png" width="20px" height="20px" onclick=\'alert("i am at "+"'+ [index]+'"+" position")\'/></div></li>').listview('refresh'); 
     } 
    } 

}

所以,當你點擊右邊按鈕,警報就會彈出,顯示當前指數。

我覺得Web開發人員也可以做同樣的事情。

我希望這會幫助你們。

相關問題