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

Question

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

    <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>

Answer 1

演示

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

JS

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

Answer 2

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

Answer 3

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

Answer 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>

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

Answer 5

您必须为动态添加的元素进行事件委托。

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

为什么 on() 有效？

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

Answer 6

像这样的东西：

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