我在使用动态生成列表元素的 BootStrap 分页时遇到问题。我可以生成列表元素，但它们似乎不响应事件，例如用户单击它们时。
让我举两个例子来更好地说明我的问题:
1) 这段代码有效。在这里，我使用静态分页，其中所有列表项都已创建。正如您所看到的，当我单击分页元素时，这些元素就会被激活。
https://jsfiddle.net/2040n6a2/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<nav id="pag_nav">
<ul class="pagination">
<li class=prev><a href=# aria-label=Previous><span aria-hidden=true>«</span></a></li>
<li><a href=#>1</a></li>
<li><a href=#>2</a></li>
<li><a href=#>3</a></li>
<li><a href=#>4</a></li>
<li><a href=#>5</a></li>
<li class=next><a href=# aria-label=Previous><span aria-hidden=true>»</span></a></li>
</ul>
</nav>
var pageItem = $('.pagination > li').not('.prev,.next');
var prev = $('.pagination > li.prev');
var next = $('.pagination > li.next');
pageItem.click(function() {
pageItem.removeClass('active');
$(this).not('.prev,.next').addClass('active');
});
next.click(function() {
$('li.active').removeClass('active').next().addClass('active');
});
prev.click(function() {
$('li.active').removeClass('active').prev().addClass('active');
});
2) 此代码不起作用。在这里，我动态创建列表元素。在这种情况下，当我单击分页元素时，这些元素不会被激活。
https://jsfiddle.net/n75d2vct/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<nav id="pag_nav">
<ul class="pagination">
</ul>
</nav>
</body>
var pageItem = $('.pagination > li').not('.prev,.next');
var prev = $('.pagination > li.prev');
var next = $('.pagination > li.next');
pageItem.click(function() {
pageItem.removeClass('active');
$(this).not('.prev,.next').addClass('active');
});
next.click(function() {
$('li.active').removeClass('active').next().addClass('active');
});
prev.click(function() {
$('li.active').removeClass('active').prev().addClass('active');
});
$('#pag_nav ul').append('<li class=prev><a href=# aria-label=Previous><span aria-hidden=true>«</span></a></li>');
for (var i = 0; i <5; i++)
{
$('#pag_nav ul').append('<li><a href=#>' + i + '</a></li>');
}
$('#pag_nav ul').append('<li class=next><a href=# aria-label=Previous><span aria-hidden=true>»</span></a></li>');
你能告诉我我在第二个例子中做错了什么吗？我知道我可以使用 Datatables 等众所周知的插件，但我想了解为什么使用普通 BootStrap + jQuery 我的代码无法正常工作。
非常感谢。
最佳答案
看看这个 fiddle https://jsfiddle.net/v14t257h/ ，就像下面的评论说:你必须使用 event delegation
如果您想动态绘制分页，代码应如下所示
$('.pagination').on('click', 'li:not(.prev):not(.next)', function() {
$('.pagination li').removeClass('active');
$(this).not('.prev,.next').addClass('active');
});
$('.pagination').on('click', 'li.prev', function() {
$('li.active').removeClass('active').prev().addClass('active');
});
$('.pagination').on('click', 'li.next', function() {
$('li.active').removeClass('active').next().addClass('active');
});
function drawPagination(numOfPages) {
$('#pag_nav ul').empty();
$('#pag_nav ul').append('<li class=prev><a href=# aria-label=Previous><span aria-hidden=true>«</span></a></li>');
for (var i = 1; i <= numOfPages; i++) {
$('#pag_nav ul').append('<li><a href=#>' + i + '</a></li>');
}
$('#pag_nav ul').append('<li class=next><a href=# aria-label=Previous><span aria-hidden=true>»</span></a></li>');
}
drawPagination(5);
关于javascript - 动态生成用于 Bootstrap 分页的 li 元素，以便它们响应 onclick 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40157660/