To gain a clearer understanding, let me elaborate further.
Let's suppose: order.OrderID = "orderId1" and order.Total = "total100"
When you append this <tr> to the DOM, the value of order.OrderID and order.Total is included in your onclick function, not the variables themselves.
Your onclick function ends up as
onclick="fun(orderId1, total100)"
. Clicking this would result in an error, as orderId1 and total100 are undefined variables. The correct approach would have been to enclose these values in quotes to make them strings, with the necessity of escaping the quotes using \ to prevent interference with the string being appended.
In cases where multiple strings or variables need to be passed, it is advisable to use custom data attributes like data-xxx="xxx".
$("#GVHistory").append("<tr><td>" + order.OrderID +"</td><td><a href='#dialogHistory' class='ShowDet ui-btn' data-transition='pop' data-orderid='"+order.OrderID+"' data-ordertotal='"+order.Total+"'>Details</a></td></tr>");
$(".ShowDet").unbind("click").on("click", function (){
var id = $(this).data("orderid");
var t = $(this).data("ordertotal");
$("#HistHead").empty().append(t + id);
});
Regarding the issue with data-role="button"
This particular jQuery Mobile attribute only functions when present in the DOM during initial page load. To incorporate dynamically appended elements, calling the corresponding widget becomes necessary. For buttons, utilizing css classes like .ui-btn can provide an easier solution for styling.