list ui-icon bind click

list ui-icon bind click

Got a listview with left aligned icon.
Unable to bind 'click' to icon.
Able to get all icon's span with selector.

  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"/>
  7. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  8. <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
  9. <script>
  11.  $('#home').live('pageshow', function (event, ui) {
  12.    console.log($.mobile.activePage.children(":jqmData(role=content)").find("UL").find("span.ui-icon"));
  13.    $.mobile.activePage.children(":jqmData(role=content)").find("UL").find("span.ui-icon").bind("click", function (e) {
  14.      alert("Icon clicked");
  15.      e.preventDefault();
  16.      e.stopPropagation();
  17.    });
  18.  });
  19. </script>
  20. <style>
  21. .ui-btn-hover-c.ui-btn-up-c.ui-btn-active span.ui-icon-arrow-r {background-position: -355px 0%;} 
  22. .ui-btn-up-c .ui-icon, .ui-btn-hover-c .ui-icon {
  23.         left: 10px;
  24.     }
  25. li a {
  26. padding-left: 35px!important;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div data-role="page" class="type-index" id="home">
  32. <div data-role="content">
  33. <ul data-role="listview" data-inset="false" data-theme="c">
  34. <li><a href="#">Item1</a></li>
  35. <li><a href="#">Item2</a></li>
  36. <li><a href="#">Item3</a></li>
  37. </ul>
  38. </div>
  39. </div>
  40. </body>
  41. </html>