same code not work after i use it with $("#id").append [duplicate]

This question already has an answer here:

• Event binding on dynamically created elements? 8 answers

i use this code html code and it work well. The button can be click and change page like i want to.

<table id="myTable" style="background-color: #FAF0BA; width: 95%">
   <thead>
      <tr align="center"  style="background-color: #009972; color: #FAF0BA;">
         <td>#id</td>
         <td>name</td>
         <td>info</td>
      </tr>
   </thead>
   <tr align="center" style="background-color: #8AABBA; color: #FAF0BA;" >
      <td>1</td>
      <td>jui co.</td>
      <td><button style="background-color: #FAF0BA; color:#00CCA5;" data-role ="button" data-mini="true" data-inline="true" data-icon ="info" class="info" value="1">info</button></td>
   </tr>
</table>

now i want to add id and name into sqlite database. After i add i wan to show is under div id="my_data" using$('#my_data').empty().append(). my code that append is the same as code i use above.

function renderList(tx, results) {
    var htmlstring = '<table id="myTable" style="background-color: #FAF0BA; width: 95%">\n';

    htmlstring += "<thead>\n";
    htmlstring += "<div id=\"current_login\" style=\"background-color: #009972;\"></div>\n";
    htmlstring += "<tr align=\"center\"  style=\"background-color: #009972; color: #FAF0BA;\">\n";
    htmlstring += "<td>#id</td>\n";
    htmlstring += "<td>name</td>\n";
    htmlstring += "<td>info</td>\n";
    htmlstring += "</tr>\n";
    htmlstring +="</thead>\n";
    var len = results.rows.length;
    for (var i = 0; i < len; i++) {
        htmlstring += "<tr align=\"center\" style=\"background-color: #8AABBA; color: #FAF0BA;\" >";
        htmlstring += "<td>" + results.rows.item(i).cid + "</td>";
        htmlstring += "<td>" + results.rows.item(i).name + "</td>";
        htmlstring += "<td><button style=\"background-color: #FAF0BA; color:#00CCA5;\" data-role =\"button\" data-mini=\"true\" data-inline=\"true\" data-icon =\"info\" class=\"info\" value=\"" + results.rows.item(i).cid + "\">info</button></td>";
        htmlstring += "</tr>";
    }
      htmlstring +="</table>";
      $('#my_data').empty().append(htmlstring);
}

it show on screen but is look like when i did't import jquery and jquery moblie (which i did and it work well on the first code) and went i click the button, it not work. how to make it work?

ps.my click code.

$(document).ready(function () {
    $(".info").on("tap",
            function () {
                document.location.href = "./customer_info.html" + "#id=" + $(this).attr("value") + "&name=" + uid;
            });
});