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.

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