Javascript 动态创建的li单击事件不工作jquery

我在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>');
   }
};

函数AddGroups（）{
对于（变量i=0；i”）；
}
};

现在，我试图捕捉创建的li元素上的单击事件

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

$（“#列表框组li”）。在（“单击”上，函数（事件）{
//一些代码
});

我也试过了

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

$（文档）。在“单击”上，“列表框组”，函数（事件）{
//一些代码
});

我在这里发现的东西很少，但对我来说什么都不管用。

---

任何人都可以提供帮助？

只需将代码放在ready函数中，第二次尝试使用事件委派检查下面的代码片段即可

希望这有帮助

---

一小条

$（函数（）{
变量组=['test-1'，'test-2'，'test-3']；
var len=组的长度；
对于（变量i=0；i”）；
}
$（文档）。在“单击”上，“列表框组”，函数（事件）{
警报（$（this.text（）+“单击”）；
});
});

检查小提琴。似乎您需要避免aHref的默认操作

函数AddGroups（）{
对于（变量i=0；i<10；i++）
{
var id=i；
var name=i；
$（“#列表框组”）.append（“
”）；
}
};
AddGroups（）；
$（“#列表框组li”）。在（“单击”上，函数（事件）{
警报（$（this.attr（“id”））；
返回false；
});

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;
    });