jQuery移动列表视图和面板

Question

基本上，我使用jQuery mobile设计这个移动应用程序。我是个新手，但我尝试过不同的方法，但都没有成功。我正在尝试编写代码，这样当您单击列表视图项目时，会打开一个面板，其中包含选定的列表视图h1（包含列表项目的标题）和p（包含此处的描述文本输入代码）。这是我的HTML:

<div data-role="panel" id="event-details" data-position="right" data-theme="b" data-display="overlay">
    <h1>Hello World</h1>
</div>
<ol data-role="listview" id="show-events" data-theme="a" data-filter="true">
    <li data-name="3A Cold-rooms & Aircons" class="ui-shadow" data-icon="my-right-white">
        <a href="#event-details" class="events-list">
            <img src="img/flower.png" class="listImage" alt="" />
            <h2>3A Cold-rooms & Aircons</h2>
            <p>Patio & Outdoor Furniture</p>
            <p>GARDEN & OUTDOOR ROOMS</p>
        </a>
    </li>

列表视图中有各种项目。

Answer 1

$('#show-events').children('li').bind('click', function(e) {

          var htxt='<h2>' +   $(this).attr('data-name') + '</h2>';
          var ptxt='<p>' + txt + '</p>';
     var stringText =htxt+ptxt;
 $("ol#plannerList").append('<li data-icon="false" class="libgPlanner ui-shadow">' + '<a class="planner-btn" href="#map-page">' + stringText + '</a>' + '</li>').listview('refresh');
        }
    });