如何为 jQuery 列表视图中的特定链接创建点击事件。答案

【问题标题】：How to create click event for specific link in a jQuery listview.如何为 jQuery 列表视图中的特定链接创建点击事件。
【发布时间】：2013-06-22 11:37:54
【问题描述】：

我正在尝试创建一个在您单击列表视图中的特定链接时启动的函数。问题是当您单击链接时，该事件似乎没有触发。该列表是动态创建的。我不确定这是否会导致问题。

    <label for="listviewForLastTenCalls">Last Ten Calls:</label>
    <ul data-role="listview" id="listviewForLastTenCalls">
    </ul>
<script>
   $('#listviewForLastTenCalls li').click(function(){
        //alert('click event handler fired');
</script>

【问题讨论】：

请多一些 HTML
是的，贴出相关的HTML代码，你的实际代码中没有LI...
$(document).on('click', '#listviewForLastTenCalls li', function () {

标签： javascript jquery html jquery-mobile

【解决方案1】：

Demo

<ul data-role="listview" id="listviewForLastTenCalls">
  <!-- items dynamically generated -->
</ul>

JS

$(document).on('click', '#listviewForLastTenCalls li a', function () {
 // code
});

【讨论】：

感谢 omar 的帮助。我忘记了事件处理程序会尝试锁定在文档加载之前不存在的 li。
@Matt 不客气，请查看演示以获取更多详细信息 :)

【解决方案2】：

问题是您在创建列表后添加了点击侦听器。当您第一次创建侦听器时，它没有什么可以听的。添加<li>后需要添加on click事件

【讨论】：

或更好，使用委托

【解决方案3】：

$('#listviewForLastTenCalls li a').click( function () {
 // code
});

【讨论】：

【解决方案4】：

我希望这不是您的完整标记，...

  <label for="listviewForLastTenCalls">Last Ten Calls:</label>
    <ul data-role="listview" id="listviewForLastTenCalls">
    </ul>

<script>
   $('#listviewForLastTenCalls li').click(function(){
        //alert('click event handler fired');
   }); //<--
</script>

如果列表是动态创建的，则必须在创建列表后附加事件...

【讨论】：

【解决方案5】：

您必须为动态添加的元素执行event delegation。

    $('"#listviewForLastTenCalls"').on("click",'li' ,function(){
       alert('triggered');
    });

为什么 on() 有效？

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

【讨论】：

【解决方案6】：

类似这样的：

$(function() {
   $("#listviewForLastTenCalls li").on('click', function() { alert('clicked');  });
});

【讨论】：