javascript - jQuery Mobile ListView 小部件点击事件未针对移动设备触发

Question

我试图绑定(bind)到 listview 项目的单击事件，该事件在浏览器中工作正常，但是当我在 Android 模拟器(webview)上将其作为带有 cordova 的应用程序运行时，我什么也没有得到，也没有控制台输出。我已经用 JSBin (下面的链接)复制了这个问题，它在浏览器中运行良好，但在 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 获取数据的请求。我还有其他在应用程序中运行良好的点击事件，如果重要的话，我的 ListView 中的数据是动态生成的，这只是使用 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直接事件处理程序和委托(delegate)事件处理程序之间的区别:

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.