CODEWITHSUNDEEP
jqueryhtmllistviewjquery-mobile
JoshDG
JoshDG

Reputation: 3931

jQuery Mobile List View: Change a Value When Clicked

I'm having trouble phrasing my question. So I have a listview in jQuery mobile and it was created dynamically. Rather than link to an outside page when a list item is clicked, I just want to be able to grab the text of the item they clicked.

In my case its a list of names, and I want to know which one they clicked. I've created the list in HTML with:

<div data-role="content" data-theme="b">

        <div id="friends_list_view" class="content-primary" data-theme="c"> 
            <ul data-role="listview" data-filter="true" data-theme="c">
            </ul>
        </div>  
    </div>

When an item is clicked, I want to run some function using the name they have selected. How can I do that?

and then dynamically updated it later with:

var listString = null;
for(i in session_library){
        listString =  '<li><a href="#">'+session_library[i]['name']+'</a></li>';
        $("#friends_list_view ul").append(listString);

}

$("#friends_list_view ul").listview('refresh');

Upvotes: 3

Views: 7944

Answers (1)

Ryan
Ryan

Reputation: 28247

Assuming that your listview will look like this:

<ul data-role="listview" data-filter="true" data-theme="c" id="my_listview">
         <li>Row A</li>
         <li>Row B</li>
</ul>

you can register a click event handler which will give you the <li> text back, e.g.

$('#my_listview').delegate('li', 'click', function () {
    alert(this.innerText);
} );    
​

Edit: Changed vclick to click. See the documentation.

Upvotes: 8

Related Questions