jQuery 移动设备的点击事件列表视图小部件未针对移动设备触发

Question

我试图绑定到 listview 项目的点击事件，它在浏览器中工作正常，但是当我运行它在 Android 模拟器（webview）上作为 cordova 的应用程序时，我得到什么都没有，也没有控制台输出。我已经用 JSBin（下面的 link）复制了这个问题，它在浏览器中工作正常，但在 android studios 模拟器中没有，它基本上只是一个 webview。

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);
});

The jQuery Mobile "vclick" event handler simulates the "onclick" event handler on mobile devices.

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

关于动态生成的列表项，请参阅here直接事件处理程序和委托事件处理程序之间的区别：

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time.

jQuery 移动设备的点击事件列表视图小部件未针对移动设备触发

jQuery Mobile listview widget on click event not firing for Mobile

javascript

jquery

jquery-mobile

cordova