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

Posted 2023-05-08

【中文标题】如何为 jQuery 列表视图中的特定链接创建点击事件。

【英文标题】：How to create click event for specific link in a jQuery listview.

【发布时间】：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 ()

【参考方案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');  );
);