时间戳

首页 > 解决方案 > 点击事件上的 jQuery Mobile listview 小部件不会为 Mobile 触发

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

问题描述

我正在尝试绑定到在浏览器中运行良好的 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,输出

标签： javascriptjquerycordovajquery-mobile

解决方案

尝试这个：

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

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

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

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

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

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

推荐阅读