0

我有一个动态创建的列表视图。

单击任何列表元素后，我需要显示一个带有文本框的弹出窗口。

我怎么能用jquery mobile做到这一点..

我正在创建如下列表视图

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

并附加如下列表元素

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

如何在单击列表元素时显示弹出窗口？

谢谢：）

4

2 回答 2

1

您可以阅读任何元素的文本——即使它是动态创建的——并将文本附加到任何你想要的地方。

下面的代码/演示将附加单击列表项的文本并将其放在文本框中。

演示

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>
于 2013-05-15T17:11:21.740 回答
0

你在问什么并不完全清楚。

绑定到列表视图的各个元素的代码是：

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

要在单击时显示弹出窗口，可以轻松地将其修改为

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

我创建了一个 JSFiddle，它说明了如何将单击处理程序绑定到列表视图元素。它还说明了如何访问被单击元素的文本字段。这样，如果您需要“key [value]”，您可以在构建要显示的弹出窗口中使用它。

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

于 2013-05-15T17:11:12.633 回答