Question

我正在我的应用中构建一个简单的搜索引擎，以根据特定条件获得一些结果。我想使用ajax和jquery来实现使用ajax的搜索并对结果进行分页。 Ajax可以很好地进行搜索，但是当我尝试对结果进行分页时，它只会在我第一次点击prev或next时工作，第二次就会打破。

(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

我使用$（document）.on解决了这个问题（“点击”，“ul.pagination li a”，函数（事件）{}）

Ajax与Django和Jquery的分页

1 个答案: