点击事件上的 jQuery Mobile listview 小部件不会为 Mobile 触发

Question

我正在尝试绑定到在浏览器中运行良好的 listview 项目的单击事件，但是当我在 Android Emulator (webview) 上将它作为带有 cordova 的应用程序运行时，我什么也得不到，也没有控制台输出。我已经用 JSBin（下面的链接）复制了这个问题，它在浏览器中运行良好，但在基本上只是一个 webview 的 android studios 模拟器中却没有。

HTML

<ul id="maclist" data-role="listview" data-inset="true">
    <li>
       <a id="23234234">
       <img src="../_assets/img/album-bb.jpg">
       <h2>Broken Bells</h2>
       <p>Broken Bells</p>
       </a>
    </li>
    <li>
       <a id="97893636">
       <img src="../_assets/img/album-hc.jpg">
       <h2>Warning</h2>
       <p>Hot Chip</p>
       </a>
    </li>
    <li>
       <a id="14235454">
       <img src="../_assets/img/album-p.jpg">
       <h2>Wolfgang Amadeus Phoenix</h2>
       <p>Phoenix</p>
       </a>
    </li>
</ul>

jQuery

$('#maclist').on('click', 'li a', function(event) {
    var id = $(this).attr("id");
    alert(id);

    // Fetch data from API using id
});

我只需要获取当前元素的 id，这样我就可以请求从我的 API 中获取数据。我还有其他在应用程序中运行良好的点击事件，如果重要的话，我的列表视图中的数据是动态生成的，这只是使用 JSBin 的示例。那么为什么我的点击事件在移动设备上的 webview 中没有响应，但在桌面浏览器上有效？

https://jsbin.com/xoyuveloje/edit?html,js,output

Answer 1

试试这个：

$(document).on('vclick', '#maclist a', function(e) {
    var id = $(this).attr('id');
    alert(id);
});

---

jQuery Mobile“vclick”事件处理程序模拟“onclick”事件 移动设备上的处理程序。

vclick参考：https://api.jquerymobile.com/vclick/

关于动态生成的列表项，请看here Direct 和 delegated event handlers 的区别：

事件处理程序仅绑定到当前选定的元素；他们 在您的代码调用 .on() 时必须存在

委托事件处理程序的优点是它们可以处理 来自后代元素的事件，这些事件被添加到文档中 稍后。