Question

我在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元素上捕获click事件。

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

我在这里找到的其他一些东西，但没有什么对我有用。有人可以帮忙吗？

Answer 1

只需将您的代码置于准备好的功能中，它将与您使用事件委派 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>

Answer 2

检查小提琴。似乎你需要避免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;
    });

动态创建li click事件不工作jquery

2 个答案:

段