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

Posted 2023-05-08

【中文标题】点击事件上的 jQuery Mobile listview 小部件不会为 Mobile 触发

【英文标题】：jQuery Mobile listview widget on click event not firing for Mobile

【发布时间】：2020-05-21 16:50:33

【问题描述】：

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

【参考方案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() 时必须存在

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

【讨论】：

这在模拟器中也不起作用，但在我的浏览器中可以正常工作

您将事件处理程序放在哪里？必须加载 JQM，必须加载 DOM。

我知道这很奇怪，因为我还有其他处理动态内容的点击功能我已经在文档中准备好了它可能是这个小部件吗？

对不起，你一直都是对的，我的 html 中有一个标签 id="#maclist" 谢谢队友