JQuery-获取li元素的ID属性

Question

我有一个分页控件，它的<li>元素被动态设置并分配了一个ID。然后我尝试使用jQuery检索这些集合ID的

<div class="col-lg-12 text-center">
   <ul class="pagination" id="pagHolder"></ul>
</div>
<script>
 $(document).ready(function () {
    //*****Logic for setting 'mainArrayHolder'*****
    for(var i = 0; t < mainArrayHolder.length; i++)
    {
       $('#pagHolder').append('<li id="'+i+'"><a href="#">'+ i +'</a></li>');
    }
 });
</script>

我遇到的问题是我在使用以下功能时收到一个"未定义"错误：

$(this).click(function(){
    var id = $(this).attr("id");
    alert(id);
});

我理解这是因为"this"关注的是整个DOM，而不仅仅是<li>元素。如何设置此代码，使其获得用户单击的任何<li>元素的id属性？

Answer 1

您需要更新click事件的选择器。

以下内容应该有效：

$('#pagHolder').on('click', 'li', function() {  
    alert( $(this).attr('id') );
});

请注意，我们使用on()函数，并将事件委托给任何现在（或将来）作为pagHolder的子节点存在的li。

或者，您不需要在事件处理程序中使用jQuery的attr()函数，因为this与DOM节点本身有关，所以您可以直接访问其属性，例如：

$('#pagHolder').on('click', 'li', function() {  
    alert( this.id );
});

Answer 2

您正在将li的附加到#pagHolder列表中，因此您可以获得这样的id，例如：

$('#pagHolder').on('click', 'li', function() {
    var id = this.id;
    alert(id);
});