add ClickListener JQuery Mobile ListView

I am not able to add clickListener to my dynamically created listView. I've tried te following at stackoverflow but it doesnt work

What is wrong and how do I solve it?

javascript/jquery

 parseContent: function() {

    $('#countries').append('<ul data-role="listview" id="mylistview" style="margin: 50px">');       
    $.each(jsonData, function(i, item) {

        console.log(item.stad); 
        $('#countries').append('<li> <img src=' + "res/flags/" + item.flag + ' id="icon">' + '<span id="listlabel">' + item.country + '</span></li>').listview().listview('refresh');
        $('#countries').hide().fadeIn(800);   
    });
    $('#countries').append('<ul>');

    /*
    $('#mylistview').on('click', function() {
        d.lg("Works"); // id of clicked li by directly accessing DOMElement property
    });
    */

     $('#mylistview').delegate('li', 'click', function () {
      alert($(this).attr('id'));
     });
}

html

   <div data-role="page" id="one">

            <div data-role="main" class="ui-content">


                <div id="countries">

                </div>

            </div>
    </div>

jquery mobile click() on listview

.delegate(...) is deprectated according to the JQuery docs.

Have you tried: $("#countries").on("click", "li", function() {})

jquery mobile click() on listview, I have a problem with the listview in jquery mobile. Because. you're adding li within listview after page reload, so any event for those li s should live (for jQuery � jQuery Mobile - Listview Filter - The list can be filtered by adding the data-filter = true attribute. A search box is included above the list and behavior to filter out the list items is adde

Always do it like this:

$(document).on('pagebeforeshow', '#index', function() {
  $(document).on('click', '#mylistview li', function() {
    alert($(this).attr('id'));
  });
});

This is delegated event binding; it doesn't care if the element is in DOM or not. Once the element is inside said event is going to be attached to it.

Working example: http://jsfiddle.net/8Lq9fkga/

Binding Click Events to Dynamically Created ListView?, I have a ListView that requires a click event. When I As I rebuild the list (as items are added, edited, in jQuery Mobile • 9 years ago EDIT: When working with split-button listviews that require a click listener, my list elements look like this:. A listview is coded as a simple unordered list containing linked list items with a data-role="listview" attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly listview with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will

try this...

 $("#mylistview").on("click", "li", function() {})

Listview, Filter. To make a list filterable, simply add the data-filter="true" attribute to the list. The framework will then append� List dividers. List items can be turned into dividers to organize and group the list items. This is done by adding the data-role="list-divider" to any list item. These items are styled with the bar swatch "b" by default (blue in the default theme) but you can specify a theme for dividers by adding the data-divider-theme attribute to the list element (ul or ol) and specifying a theme swatch letter.

Listview Widget, When the enhanced markup is applied to the listview, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to� JQuery Listview image demo for rendering content with regular images, icons and avatars. Customize it with custom CSS. For jQuery or jQuery Mobile.

Listview Widget, Listview Widgetversion added: 1.0 A listview is coded as a simple unordered list containing linked list items with a data-role="listview" attribute. jQuery Mobile � Dynamically Appending Elements to jQuery Mobile ListView 1 min read February 24, 2011 I've been developing with jQuery Mobile the past several weeks and the application I'm working on has a listing page where I am retrieving the results via \$.ajax and then dynamically appending the results to the current page.

jQuery Mobile, jQuery Mobile is designed to work with simple page linking conventions. Essentially, you can this works in JQM 1.2 $(".page3-button").on("click", function() { // add a click listener <ul data-role="listview" class='myList'> <li data -icon='gear'> When the enhanced markup is applied to the listview, jQuery Mobile will try to first use CSS to add numbers to the list and, if not supported, will fall back to injecting numbers with JavaScript. Numbered list example Read-only lists. Listviews can also be used to display a non-interactive list of items, usually as an inset list.

Comments
  • While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply.