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

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 控制台中运行该代码(用 listview 自己的 id 替换 $(this) )，它就可以正常工作。所以我认为我编写的该函数没有任何问题。)

<强> Fiddle

我找到了this question并尝试使用 listviewcreate功能。好像没什么区别。

还有什么我可能会错过的吗？为什么它可以在控制台中运行，但在页面加载时却不能运行？

---

编辑:所以我的 fiddle 现在神秘地工作了。我猜想我们网站上的某个地方还存在其他问题，无法用这个最小的示例来重现。

---

另一个编辑:$(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