title: Javascript function is not called when the list item is clicked
body: <p>I have a simple app that uses IndexedDb, JQuery and JQuery mobile. I have this showData() function that populates a un-ordered list. All the pages of the app is in one html file.</p>
  
  <pre><code>function showData() {
      // clear the item list
      $('#itemList').html('');
      var output = '';
      var objectStore = db.transaction(dbTable).objectStore(dbTable);
      objectStore.openCursor().onsuccess = function(event) {
          var cursor = event.target.result;
  
          if (cursor) {
              // generate the list items
              output += '&lt;li&gt;';
              output += '&lt;a href="#details" onclick="displayObject(\'' + cursor.value.SSN + '\')"&gt;';
              output += '&lt;h2&gt;' + cursor.value.Name + '&lt;/h2&gt;';
              output += '&lt;p&gt;' + cursor.value.Address + '&lt;/p&gt;'; 
              output += '&lt;/a&gt;';
              output += '&lt;a href="#deleteItem" data-rel="popup" data-position-to="window" data-transition="pop"&gt;Delete Entry&lt;/a&gt;';
              output += '&lt;/li&gt;';
              // add the list item to UL
              $('#itemList').append(output);
              // clear pervious item
              output = ''; 
  
              cursor.continue();
  
          } else {
              //
              $('#notice').append('&lt;p&gt;All Items Loaded Successfully!&lt;/p&gt;');
          }
      };
  }
  </code></pre>
  
  <p>The list items are show fine and when i click on a list item it should navigate to the details page.. When clicking on the list item a function called diaplayObject(id) function should be called and then it uses the id to get the data and populate the details page. Here is the function</p>
  
  <pre><code>function displayObject(id) {
      console.log('In diaplayObject()');
      var objectStore = db.transaction(dbTable).objectStore(dbTable);
      objectStore.openCursor().onsuccess = function(event) {
          var cursor = event.target.result;
  
          if (cursor) {
              if (cursor.value.SSN == id) {
                  $('#name').html(cursor.value.Name);
                  $('#address').html(cursor.value.Address);
                  return;
              }
              cursor.continue();
          } else {
              $('#name').html('No DATA');
          }
      };
  }
  </code></pre>
  
  <p>My problem is this function is not called when i click on the link. I used the debugger in Firefox and the brakepoint will not get hit. i can't figure out what is the problem. What am i doing wrong.</p>
  
  <p>Generated HTML (list items)</p>
  
  <pre><code>&lt;ul id="itemList" data-inset="true" data-role="listview" data-filter="true" data-filter-placeholder="search" data-split-icon="delete" data-split-theme="a" data-theme="a"&gt;
              &lt;li class="ui-li-has-alt ui-first-child"&gt;
                  &lt;a class="ui-btn" href="#details" onclick="displayObject('111')"&gt;
                      &lt;h2&gt;Kasun&lt;/h2&gt;
                      &lt;p&gt;Imbulgoda&lt;/p&gt;
                  &lt;/a&gt;
                  &lt;a title="Delete Entry" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-a" aria-expanded="false" aria-owns="deleteItem" aria-haspopup="true" href="#deleteItem" data-rel="popup" data-position-to="window" data-transition="pop"&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="ui-li-has-alt"&gt;
                  &lt;a class="ui-btn" href="#details" onclick="displayObject('458')"&gt;
                      &lt;h2&gt;Gayan&lt;/h2&gt;
                      &lt;p&gt;Gampaha&lt;/p&gt;
                  &lt;/a&gt;
                  &lt;a title="Delete Entry" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-a" aria-expanded="false" aria-owns="deleteItem" aria-haspopup="true" href="#deleteItem" data-rel="popup" data-position-to="window" data-transition="pop"&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="ui-li-has-alt"&gt;
                  &lt;a class="ui-btn" href="#details" onclick="displayObject('881')"&gt;
                  &lt;h2&gt;Kasun&lt;/h2&gt;
                  &lt;p&gt;Gampaha&lt;/p&gt;
              &lt;/a&gt;
              &lt;a title="Delete Entry" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-btn-a" aria-expanded="false" aria-owns="deleteItem" aria-haspopup="true" href="#deleteItem" data-rel="popup" data-position-to="window" data-transition="pop"&gt;&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>