Writing Html With CSS in JQuery

Question

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 ?

Possible dupe: http://stackoverflow.com/questions/5562461/refresh-a-section-after-adding-html-dynamically-to-jquery-mobile — AndrewR, Jun 25 '12 at 20:14
What does data-inline, data-theme do? Why not use a css class, class="myclass", and define in — NoBugs, Jun 25 '12 at 20:14
@nobugs He didn't say so, but this looks like JQueryMobile code. JQM will automatically add styles and such based on the different theme/role/options that are set. — AndrewR, Jun 25 '12 at 20:16
@AndrewR Cool, looks like a multi-theme setup similar to https://www.adobe.com/devnet/dreamweaver/articles/theme-control-jquery-mobile.html — NoBugs, Jun 25 '12 at 20:21

score 4 · Accepted Answer · answered Jun 25 '12 at 20:19

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');

Praveen Kumar Purushothaman · Answer 2 · 2012-06-25T20:20:47.130

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);.

Example

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?

I gave you the detailed explanation @user1198485. Check it out, and see if you are able to understand it. :) — Praveen Kumar Purushothaman, Jun 25 '12 at 20:21

score 0 · Answer 3 · answered Jun 25 '12 at 20:15

0

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.

answered Jun 25 '12 at 20:15

TelFiRE

462
1
6
17

Writing Html With CSS in JQuery

3 Answers3

Example