动态地为引导分页生成li元素，以便它们响应onclick事件

Generate li elements for bootstrap pagination dinamically so they respond to onclick events

本文关键字：事件 onclick 响应 元素 li 分页 动态      更新时间：2023-09-26

我有问题，使工作的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>&laquo;</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>&raquo;</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>&laquo;</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>&raquo;</span></a></li>');

你能告诉我第二个例子我做错了什么吗?我知道我可以使用众所周知的插件，如数据表，但我想了解为什么使用普通BootStrap + jQuery我的代码不工作。

看看这个提琴https://jsfiddle.net/v14t257h/，就像下面的评论说的:你必须使用事件委托

如果您想动态绘制分页，代码应该看起来像这样

$('.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>&laquo;</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>&raquo;</span></a></li>');
}
drawPagination(5);
相关文章：