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

Question

I use this html code and it works well. The button can be clicked and change a 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 shows on screen but is look like when I did't import jquery and jquery mobile (which I did and it works well on the first code) and went I click the button, it doesn't work. It look like it isn't loading jquery and jquery mobile. It looks the same when I remove jquery and jquery mobile import and run the first code. 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;
            });
});

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

i try the code below but it 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;
            });
});

`$('#my_data').on("tap",".info", function(){ //Your code.........}` — Satpal, Jul 16 '15 at 10:31
you mean change $(".info").on("tap",//code) to $('#my_data').on("tap",".info", function(){ // code.........} ps. i try $(".info").on("tap", function(){ alert("test")}); it don't salert anything — khunjuice, Jul 16 '15 at 10:41
$('#my_data').on("tap",".info", function(){ //Your code.........} not working — khunjuice, Jul 16 '15 at 10:47

score 0 · Answer 1 · edited Jul 16 '15 at 12:44

0

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

try replacing #id with ?id

edited Jul 16 '15 at 12:44

xdumaine

10,096
6
62
103

answered Jul 16 '15 at 10:33

vebbo

240
5
14

i work with other of my button. but the only button that isn't work is the one that had beed add by .append – khunjuice Jul 16 '15 at 10:39
so try this instead `$('#my_data').empty().append($(htmlstring));` – vebbo Jul 16 '15 at 10:43
same result as $('#my_data').empty().append(htmlstring) that i use. – khunjuice Jul 16 '15 at 10:52

score 0 · Accepted Answer · answered Jul 16 '15 at 14:27

To get the jQM styling, you must tell jQM to enhance the widgets after appending them to the page. For jQM 1.3.x:

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

For jQM 1.4.x you can use

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

For the click handler, where is uid coming from? if it has spaces and special characters, you must url encode it to include in a link address encodeURIComponent(uid).For passing query strings, use '?' instead of '#' after the .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

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

2 Answers2