Question

I’d like to refresh in an input text after dynamically add the attribute “data-theme”.

How can I do this?

I’d like that: http://jsfiddle.net/Sgrve/5/

If I click the “Change Theme”, I want to change the color of the input.

Data-theme attribute change but the color don’t change.

Answer 1

Live Example:

• http://jsfiddle.net/Sgrve/3/
• http://jsfiddle.net/Sgrve/14/ (From your comment)
• http://jsfiddle.net/Sgrve/20/ (Select theme from radio group)

JS

$('#addContent').append('<input type="text" value="Default Value" id="newContent" />');
alert('Adding Dynamic content/element');

$('#newContent').val('Hello new Value 123');
alert('Changing the value');

$('#home').trigger('create');
alert('Refreshing JQM controls and look');

HTML

<div data-role="page" id="home"> 
    <div data-role="content">
        <div id="addContent">
            <!-- Add Dynamic content here -->
        </div>
    </div>
</div>

UPDATE From your comment

JS

$("#btn1").click(function() {
    $('#txtContent').attr('data-theme','e').removeClass('ui-body-d').addClass('ui-body-e').trigger('create');
});

$("#btn2").click(function() {
    alert("Theme = " + $('#txtContent').attr('data-theme'));
});

HTML

<div data-role="page" id="home"> 
    <div data-role="content">
        <div id="addContent">
            <p><input type="text" value="I want to copy you" data-theme="d" id="txtContent" /></p>
            <p><input type="text" value="Try to look like me" data-theme="e" id="txtContent2" /></p>
            <p><button id="btn1">Change theme</button></p>
            <p><button id="btn2">View theme</button></p>
            <!-- Add Dynamic content here -->
        </div>
    </div>
</div>