How to detect a click on particular list view item in one data-role="page" and display corresponding data on other

Community,

I am trying my hands on with a static jquery-mobile app. What it does is has a large static list on its <div data-role="page" id="page1">

Whenever an item is clicked/tapped, some corresponding detail has to be displayed on <div data-role="page" id="page2"> in the fixed placeholders using a switch-case decision, say, the Variable SRC details of the <img> tag which is uniform.

My confusion is, how do I achieve this? Does the #id selector of jQuery work to achieve this particular aim? If yes then how do I proceed? And what should be the snippet which aids me to detect and display the corresponding details for a list item. A little guidance please

My List Structure:

<ul data-role="listview" data-inset="true" data-filter="true" data-theme="d" data-icon="false" data-filter-placeholder="Search" class="jqm-list" id="list">

<li id="A"><a href="#page2" data-ajax="false">A</a></li>
<li id="B"><a href="#page2" data-ajax="false">B</a></li>
<li id="C"><a href="#page2" data-ajax="false">C</a></li>
<li id="D"><a href="#page2" data-ajax="false">D</a></li>
</ul>

Please correct me if I'm wrong somewhere Thanks

event.target will give you the element that triggered the event, or $(this). So for instance you can do something like

    $("li").click(function(event) {
       var clickedItemID = event.target.id;
      //your snipped to affect page 2 goes here ....
    });

depending on what else is on the page you probably want to target the event better that just attaching to every li obviously.

EDIT

You may be able to get away without a switch/case statement if you can modify content based on appending the ID that you receive from the event to some other element. For example if when clicked you are changing an image on the other page you can use something like

$("li").click(function(e) {

    var list_id = $(this).attr('id');
    $('#page2-image').attr('src', list_id + '.jpeg');

});

If you can get away with this approach it is better than switch/case as the function does not need to be edited each time you add/remove options. BTW - the above is a rough example only and doesn't account for any passing of data between jquery mobile pages.

The alternative would be something like

$("li").click(function(e) {

    var list_id = $(this).attr('id');
    switch(list_id)
    {
        case "A":
            //execute code block 1
        break;
        case "B":
            //execute code block 2
        break;
        case "C":
            //execute code block 2
        break;
        case "D":
            //execute code block 2
        break;
        default:
            //code to be executed if case not covered above
     }

});

Which as you can see requires a lot more code.

Glen