In My HTML Page I want to display certain Number of Buttons Based on the Count. So i used to display these buttons Dynamically. Fot That I Have written
var html = "<a href='#' data-role='button' data-theme='b' data-inline='true'>Pay</a>";
$("#DivId").append(html);
But The Styling is not applied to the Button. When I Am Trying to Write the below code in Div Tag Directly It works fine
<a href='#' data-role='button' data-theme='b' data-inline='true'>Pay</a>
Any Help ?
You have to allow JQueryMobile to update for the newly added DOM elements.
See http://jquerymobiledictionary.pl/faq.html
var html = "<a href='#' data-role='button' data-theme='b' data-inline='true'>Pay</a>";
$("#DivId").append(html).trigger('create');
Have you used the styling by JavaScript on $(document).ready() function or something? In that case, you need to reinitate the function after the execution of $("#DivId").append(html);.
You have a function like this:
$(document).ready(function(){
$('a[href="#modal"]').click(function(){
alert("Modal");
});
});
It gets executed in the runtime, after the page loads. You are dynamically inserting another <a> tag with the same stuff. Eg:
$("#result").html('<a href="#modal">Modal Window</a>');
What happens is, this HTML is inserted after the handler is executed. So, the handler initiated in the $(document).ready() function is not applicable for this. So, in order to make sure that even this gets executed, you need to reinitialize it this way:
$(document).ready(function(){
loadPage();
});
function loadPage(){
$('a[href="#modal"]').click(function(){
alert("Modal");
});
}
function something(){
$("#result").html('<a href="#modal">Modal Window</a>');
loadPage();
}
Hope you got it?
The answer is it should work. As long as the code outputs properly in the DOM (see with Firebug or other inspector) there is no reason CSS won't work on it, and most likely the problem is with your CSS that you haven't shared.
