动态创建的 li 点击事件不起作用 jQuery

dynamically created li click event not working jquery

本文关键字：事件 不起作用 jQuery 创建 li 动态      更新时间：2023-09-26

我在html文件中定义了无序列表

<ul id="listbox-groups"></ul>

我动态创建 li 元素

function AddGroups(){
   for (var i = 0; i < len; i++)
   {
       var id = groups[i].split("-")[0];
       var name = groups[i].split("-")[1];
       $('#listbox-groups').append('<li id="' + id + '" class="listbox-li"><a href="#" class="listbox-li-a" style="text-decoration: none">' + name + '</a></li>');
   }
};

现在我正在尝试在创建的 li 元素上捕获单击事件。

<script type="text/javascript">
    $("#listbox-groups li").on("click", function(event) {
        //some code
    });
</script>

我也试过

<script type="text/javascript">
    $(document).on("click", "#listbox-groups li", function(event) {
        //some code
    });
</script>
我

在这里找到的其他东西很少，但对我没有任何用处。有人可以帮忙吗？

只需将您的代码放在 ready 函数中，它就可以与你第二次尝试使用 eventdelegate on（） 时工作，检查下面的代码片段。

希望这有帮助。

片段

$(function(){
    var groups = ['test-1','test-2','test-3'];
    var len = groups.length;
    for (var i = 0; i < len; i++)
    {
      var id = groups[i].split("-")[0];
      var name = groups[i].split("-")[1];
      $('#listbox-groups').append('<li id="' + id + '" class="listbox-li"><a href="#" class="listbox-li-a" style="text-decoration: none">' + name + '</a></li>');
    }
    $(document).on("click", "#listbox-groups li", function(event) {
      alert($(this).text()+" clicked");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="listbox-groups"></ul>

检查小提琴。 似乎您需要避免 aHref 的默认操作。 https://jsfiddle.net/vh08vw84/

function AddGroups(){
   for (var i = 0; i < 10; i++)
   {
       var id = i;
       var name = i;
       $('#listbox-groups').append('<li id="' + id + '" class="listbox-li"><a href="#" class="listbox-li-a" style="text-decoration: none">' + name + '</a></li>');
   }
};
AddGroups();
$("#listbox-groups li").on("click", function(event) {
        alert($(this).attr("id"));
        return false;
    });
相关文章：