使用Django和Jquery的Ajax分页

Question

在我的应用程序中构建一个简单的搜索引擎，以根据特定条件获取一些结果。我想用ajax和jquery来实现使用ajax进行搜索并对结果进行分页。 Ajax可以很好地进行搜索，但是当我尝试对结果进行分页时，它仅在第一次打开上一个或下一个时才起作用，而第二个时间似乎打破。

(function(){ 

$("form#search").on("submit", function(event){ 

    event.preventDefault(); 
    var $this = $(this); 


    $.ajax({ 

     type:"GET", 
     dataType:"html", 
     data:$this.serialize(), 
     url:"/properties/search/", 
     success:function(resp){ 

      $(".col-md-9").html($(resp).find(".properties")); 

     }, 
     error: function(){ 

      $(".col-md-9").html('<h1>Verifique los datos ingresados para realizar una correcta búsqueda</h1>'); 

     } 

    }) 

}) 

})(); 

//分页

(function(){ 

$("ul.pagination li a").on("click", function(event){ 

    $this = $(this); 
    console.log($this.prop("href")); 
    event.preventDefault(); 

    $.ajax({ 

     type:"GET", 
     dataType:"html", 
     url:$this.prop("href"), 
     success:function(resp){ 

      $(".col-md-9").html($(resp).find(".properties")); 

     }, 
     error: function(){ 

      $(".col-md-9").html('<h1>Verifique los datos ingresados para realizar una correcta búsqueda</h1>'); 

     } 

    }) 

}) 

})(); 

//模板

 <div class="text-center"> 
        <ul class="pagination"> 
         <li><a href="/properties/search">&lt;&lt;</a></li> 
         {% if properties.has_previous %} 
          <li><a href="?{{ path }}&amp;page={{ properties.previous_page_number }}">Anterior</a></li> 
         {% else %} 
          <li><a href="#">Anterior</a></li> 
         {% endif %} 
         {% if properties.has_next %} 
          <li><a href="?{{ path }}&amp;page={{ properties.next_page_number }}">Siguiente</a></li> 
         {% else %} 
          <li><a href="#">Siguiente</a></li> 
         {% endif %} 
         <li><a href="?{{ path }}&amp;page={{ properties.paginator.num_pages }}">&gt;&gt;</a></li> 
        </ul> 
       </div> 

Answer 1

我解决了使用$（文件）。在这个问题（ “点击”， “ul.pagination李一” ，功能（事件）{}）