刷新 jQuery Mobile 上的文本输入（主题）

Question

我想在动态添加属性“data-theme”后刷新输入文本。

我该怎么做？

我想要那个：http://jsfiddle.net/Sgrve/5/

如果我点击“更改主题”，我想更改输入的颜色。

数据主题属性改变但颜色不变。

Answer 1

现场示例：

• http://jsfiddle.net/Sgrve/3/
• http://jsfiddle.net/Sgrve/14/（来自您的评论）
• http://jsfiddle.net/Sgrve/20/（从电台组中选择主题）

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>

更新来自您的评论

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>

Answer 2

尝试运行

$('#page_id').page('refresh');

或

$('#list_id').listview('refresh');

如果它在列表中。