javascript - same code not work after i use it with $("#id").append.the code look like the code that not load jquery and jquery moblie -

i use html code , works well. button can clicked , change page 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 want add id , name sqlite database. after add wan show under div id="my_data" using$('#my_data').empty().append(). code append same code 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;     (var = 0; < 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 shows on screen when did't import jquery , jquery mobile (which did , works on first code) , went click button, doesn't work. isn't loading jquery , jquery mobile. looks same when remove jquery , jquery mobile import , run first code. how make work?

ps.my click code.

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

--------------------------update1------------------------

i try code below still don't work

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

to jqm styling, must tell jqm enhance widgets after appending them page. jqm 1.3.x:

$('#my_data').empty().append(htmlstring).trigger("create"); 

for jqm 1.4.x can use

$('#my_data').empty().append(htmlstring).enhancewithin(""); 

for click handler, uid coming from? if has spaces , special characters, must url encode include in link address encodeuricomponent(uid).for passing query strings, use '?' instead of '#' after .html.

$('#my_data').on("tap",".info", function () {     var uid = "jui. co";     var url = "./customer_info.html" + "?id=" + $(this).prop("value") + "&name=" + encodeuricomponent(uid);     alert(url);     location.href = url; }); 

demo