设置 Jquery 移动输入字段的文本

Question

我在设置 jQuery Mobile 文本输入的显示文本时遇到问题。以下是我的代码

$('#editPartyName').textinput();
$('#editPartyName').val(party.name);

行为真的很奇怪，第一次显示模态框时，文本输入框在模态框上（jquery mobile simple dialog plugin），文本在模态框上的输入字段中就好了。但是，第二次显示模式时，输入中的可视文本将消失。但是，当我检查元素的值时， alert($('#editPartyName).val());该值在那里并且是正确的。文本不会显示在元素中。我正在使用 JQM Beta 1。我还尝试在 val() 声明之后粘贴 $('#editPartyName').textinput() 。

有人有什么建议吗？谢谢！

Answer 1

我也遇到过这个。我可以使用$('#some_id').val('foobar') 设置文本输入的值，然后使用console.info($('#some_id').val()); 将值打印到控制台，但在浏览器中，文本输入为空。

戳了一会儿之后，我发现$('input[id=some_id]').val('foobar') 按预期工作。因此，显然，jQuery 通过 ID 引用元素存在某种奇怪的错误。

Answer 2

要创建使用.textinput() 的jQuery Mobile 文本输入样式，并使用.textinput("refresh") 刷新现有的jQuery Mobile 文本输入的视图。因此，在后续调用中，您需要使用.textinput("refresh") 方法，在未初始化的文本输入中，您需要使用.textinput()。

类似：

$('#editPartyName').val(party.name).textinput('refresh');

我的经验是选择输入，但我相信文本输入也是如此，这是我为选择更新视图所做的：

$("select#foo").selectmenu("refresh");

此示例来自文档：http://jquerymobile.com/demos/1.0b1/docs/forms/forms-selects.html（页面底部）

更新

除了改变输入元素的值，你不需要做任何事情：

$('#editPartyName').val(party.name)

这是一个使用 jQuery Mobile 1.1.0 的演示：http://jsfiddle.net/VbAKL/

这是一个使用 jQuery Mobile 1.0B1 的演示：http://jsfiddle.net/VbAKL/1/

这个问题很有可能是因为您是按 ID 选择的，并且 DOM 中可能同时存在多个 ID 实例。 jQuery Mobile 网站一次可以在 DOM 中拥有多个“伪页面”，如果您在每个页面中都有一个 ID 为 #header 的元素，那么当您尝试为 #header 运行选择时，只有第一个实例将被退回。因此，您的 $('...').val(...) 函数调用可能正在工作，只是不在正确的元素上。

简短回答：使用 jQuery Mobile 时，确保您的 ID 在您网站的所有页面中都是唯一的。