Binding Click Events to Dynamically Created ListView?

Binding Click Events to Dynamically Created ListView?

I have a ListView that requires a click event.  When I first initialize the list, everything works great.  As I rebuild the list (as items are added, edited, and removed), the click event stops working.

I have this HTML:

  1. <ul data-role="listview" data-theme="b"  id="data-list" data-filter="true"></ul>
I have this code in an init function that gets called on page load:

  1. // initialize listview
  2.             if (window.localStorage.length - 1) {
  3.                 var contacts_list = [], i, key;
  4.                 for (i = 0; i < window.localStorage.length; i++) {
  5.                     key = window.localStorage.key(i);
  6.                     if (/Contacts:\d+/.test(key)) {
  7.                         contacts_list.push(JSON.parse(window.localStorage.getItem(key)));
  8.                     } // if
  9.                 } //for
  10.                
  11.                 if (contacts_list.length) {
  12.                     contacts_list
  13.                         .sort(function(a, b) {
  14.                             return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);
  15.                         })
  16.                         .forEach(Contacts.tableAdd);
  17.                         $('#data-list').listview('refresh');
  18.                 } //if
  19.             }; //if
Here's what the tableAdd function called on line 16 does:

  1. tableAdd: function(entry) {
  2.             var key;
  3.             var textToInsert = '<li data-icon="arrow-r" id=entry-'+ entry.id + '>';
  4.             textToInsert += entry.last_name + ", " + entry.first_name + '<a href="#"></a></li>';
  5.             $('#data-list').append(textToInsert);
  6.             $("li#entry-" + entry.id).bind('click', function (e,info) {
  7.                 //$.mobile.pageLoading();   
  8.                 Contacts.$form.first_name.value = entry.first_name;
  9.                 Contacts.$form.last_name.value = entry.last_name;
  10.                 Contacts.$form.email.value = entry.email;
  11.                 Contacts.$form.id_entry.value = entry.id;
  12.                 $('#delete-button-area').show();
  13.                 $.mobile.changePage("form-page", "slide", false, true);
  14.             });
  15.         },  // end tableAdd

So far, that works well for me....

As I add and remove list elements localStorage using other areas of code, I want to rebuild the list element, so I do this...

  1. refreshTable: function() {
  2.             // remove all rows
  3.             $('#data-list').empty();
  4.             // initialize listview
  5.             if (window.localStorage.length - 1) {
  6.                 var contacts_list = [], i, key;
  7.                 for (i = 0; i < window.localStorage.length; i++) {
  8.                     key = window.localStorage.key(i);
  9.                     if (/Contacts:\d+/.test(key)) {
  10.                         contacts_list.push(JSON.parse(window.localStorage.getItem(key)));
  11.                     } // if
  12.                 } //for
  13.                
  14.                 if (contacts_list.length) {
  15.                     contacts_list
  16.                         .sort(function(a, b) {
  17.                             return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);
  18.                         })
  19.                         .forEach(Contacts.tableAdd);
  20.                         $('#data-list').listview('refresh');
  21.                 } //if
  22.             }; //if

All of the code below line 3,   $('#data-list').empty();, is identical to the code that gets called when the page initializes. 

The listview looks great, but the click event is not being bound to the entry.