Question

设置

我使用jQuery Mobile 1.4.2创建了一堆自动完成下拉控件。（Docs here.）

<ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-theme="b" id="listview-XXXXXX">
    <li class="ui-screen-hidden"><a href="#">Text</a></li>
    ...
</ul>

在渲染我的页面时，jQuery Mobile将其转换为以下HTML：

<form class="ui-filterable">
    <div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-b ui-corner-all">
        <input data-type="search" placeholder="Filter items...">
        <a href="#" class="ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text</a>
    </div>
</form>
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-theme="b" id="listview-XXXXXX" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <li class="ui-screen-hidden"><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Text</a></li>
</ul>

到目前为止一切顺利。

我想做什么

我想在动态创建的<input>标记中添加一个ID（以便我可以看到用户何时更新它并在其他位置触发Javascript事件）。这似乎没有开箱即用的小部件，所以我尝试自己添加它：

$(document).on("listviewcreate", "", function (e, ui) {
    var newId = "question-" + e.target.id.substr(9);
    $(e.target).prev("form").find("input")attr("id", newId);
});

但是没有将这样的id添加到输入字段中。（如果我在页面加载后在Chrome控制台中运行该代码（用$(this)替换列表视图自己的ID），它可以正常工作。所以我不认为有任何错误我写的那个功能。）

Fiddle

我找到this question并尝试使用listviewcreate功能。它似乎没有什么区别。

还有什么我可能会遗失的吗？为什么它可以从控制台工作，但不能在页面加载时工作？

编辑：所以我的小提琴神秘地起作用了。我猜我们网站上的某些地方还有其他错误，但是无法用最小的例子进行复制。

另一个编辑：$(e.target).prev("form")似乎没有任何内容。

Answer 1

延迟是创建过滤器输入是由新窗口小部件filterable引起的。而不是听listviewcreate事件，请听filterablecreate一个。并使用.prop()代替.attr()。

$(document).on("filterablecreate", function (event, ui) {
  var newId = "question-" + $(event.target)[0].id.substr(9),
  $(event.target).prev("form").find("input").prop("id", newId);
});

<强> Demo

jQuery mobile listview - 无法将id添加到动态输入框中

设置

我想做什么

1 个答案: