页面分页不起作用

Question

我有一个分页页面。第一次，数据和分页链接从服务器生成并显示在我的视图中。我有一个下拉列表。下次我想随时更改数据和分页链接更改了下拉列表而无需使用 jquery、ajax、json 加载页面。我已成功更改数据和链接。我已根据第一次服务器返回创建了分页链接。但这次我无法触发 ul >li>a 元素。我不知道为什么!!!。但是相同的 js2 代码适用于服务器返回的分页。

Html:服务器返回

 <div class="pagination">
    <ul>
       <li class="disabled"><a >1</a></li>
       <li><a href="http://localhost:8070/poralekha/home/universities/5">2</a></li>
    </ul>  
 </div>

这行得通。

JS1：用于分页：

  var pagination=" ";
  pagination+="<ul >";

  for(var i=1; i<=data['varsities'].length ;i++)
    {
        pagination+="<li class='disabled'>";
        pagination+="<a href='#' class='page'  >";
        pagination+=i;
        pagination+="</a>";
        pagination+="</li>";

    }
   pagination+="</ul>";

  $('.pagination').html(pagination );

这里的 class='page' 只用于在点击 .page 时获取 i 的值

Js2：两种分页通用

   $(".pagination > ul >li > a").click(function(event){
        event.preventDefault();
        alert("This index is clicked.");
    });

或

      $(".page").on('click', function(event){
          event.preventDefault();
          alert(" clicked.");
      });

简而言之，我希望在单击 .page 时触发。我快要生气了。请问我该如何解决这个问题？ 谢谢。

Answer 1

尝试使用on() 方法代替click()：

    $(".pagination > ul >li > a").on('click', function(event){
        event.preventDefault();
        alert("This index is clicked.");
    });

对于旧版本的 jQuery，使用live() 方法：

    $(".pagination > ul >li > a").live('click', function(event){
        event.preventDefault();
        alert("This index is clicked.");
    });