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');

        }

    });