點擊jquery mobile中的listiem獲取彈出框

Question

我有一個動態創建的listview。

一旦點擊任何列表元素，我需要顯示一個文本框彈出。

我怎樣才能做到這一點使用jQuery移動..

我創建的ListView像下面

div data-role="page" id="storedlist"> 
     <h1></h1> 
    </div> 
    <div data-role="content"> 
     <ul id="storedList"> 
     </ul> 
    </div> 
</div> 

和附加listelements像下面

$('#storedList').append('<li><a href="#">'+key["value"]+'</a></li>'); 

我該怎麼讓彈出點擊列表元素？

謝謝:)

Answer 1

這並不完全清楚你在問什麼。

綁定到一個列表視圖中的單個元素的代碼是：

$("#storedList").children().on() 

爲了表示對點擊此可以很容易地修改，以

$("#storedList").children().on("vclick", function() { 
    $("#popup").popup("open"); 
} 

我創建了一個的jsfiddle一個彈出它演示瞭如何將點擊處理程序綁定到listview元素。它還說明了如何訪問被點擊元素的文本字段。這樣，如果您需要「鍵[值]」，您可以在構建要顯示的彈出窗口中使用該鍵。

http://jsfiddle.net/ccg55/4/

Answer 2

您可以讀取任何元素的文字 - 即使它是動態創建 - 並添加任何你想要的文字。

下面的代碼/演示將附加單擊列表項的文本，並將其放入一個文本框。

Demo

JS

$(document).on('click', 'li a', function() { 
var text = $(this).text(); 
$('#popup input').empty(); 
$('#popup input').val(text); 
$('#popup').popup('open'); 
}); 

HTML

<div data-role="page"> 
<div data-theme="a" data-role="header"> 
    <h1>Page</h1> 
</div> 
<div data-role="content"> 
    <ul data-role="listview"> 
    <li><a href="#">Acura</a></li> 
    <li><a href="#">Audi</a></li> 
    <li><a href="#">BMW</a> 
    </ul> 
</div> 
// Popup 
<div data-role="popup" id="popup" data-overlay-theme="a" data-theme="c" data-dismissible="true" style="width:400px;" class="ui-corner-all"> 
    <div data-role="header" data-theme="a" class="ui-corner-top"> 
    <h1>List to Text!</h1> 
    </div> 
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> 
    <h3 class="ui-title">Reserved for dynamic text</h3> 
    <input type="text" name="test" id="test" value="" /> 
    </div> 
</div> 
</div>