href in popup listview: jquery selector not selecting intended element

href in popup listview: jquery selector not selecting intended element

In the following html block in a jqm app, I cannot select "DEF" (which is in the second <li> element):

  1. <div data-role='popup' id='popupSwitchView' data-theme='none'> <ul data-role='listview'> <legend>Choose a view</legend> <li><a href='javascript:;' data-role='button' data-transition='fade' data-mini='true' class='ui-btn-active switchview' id='ABC' name='theView' value='ABC'>ABC</a> </li> <li><a href='http://google.com' data-role='button' data-transition='fade' data-mini='true' class='switchview' id='DEF' name='theView' value='DEF'>DEF</a> </li> </ul> </div>





I want my user to be able to click on "DEF" whereupon I hope to display json data on the same page.


This is the jquery I'm using to get that DEF:


  1. $('#DEF').on('click', function () { event.preventDefault();



Since I'm testing this on a PC with a mouse, I looked at the issue in Chrome Developer Tools, Source tab -> Event Listener Breakpoints -> Mouse -> Click and then hitting f11 until it stops jumping around.


I see that the cursor winds up in some inescapable while loop in jquery-2.1.1.js on line 4521.


Obviously my selector isn't going to work. Any ideas on how I could make it work?