Jquery 脚本未在 Django 分页页面上运行

Question

我环顾四周并尝试了很多东西，但似乎没有任何效果。

问题： 有一个 jQuery 脚本可以在第一页上完美运行，但不能在任何其他分页页面上运行。我对上下文变量有同样的问题，但我通过在上下文处理器中添加这些变量解决了这个问题，但是当涉及到 jQuery 时，我不知道如何解决这个问题。

分页jQuery：

<script>
function ajax_get_update()
{
   $.get(url, function(data){
      var span = $("span.step-links", data);
      $('.blog-home').html(data);
      $('.step-links').html(span);
    }, "html");
}

$( document ).ready( function() {
    $( '.step-links #prev' ).click( function(e) {
        e.preventDefault();
        url = ($( '.step-links #prev' )[0].href);
        ajax_get_update();
    });

    $( '.step-links #next' ).click( function(e) {
        e.preventDefault();
        url = ($( '.step-links #next' )[0].href);
        ajax_get_update();

    });
});

$( document ).ajaxStop( function() {
    $( '.step-links #prev' ).click( function(e) {
        e.preventDefault();
        url = ($( '.step-links #prev' )[0].href);
        ajax_get_update();
    });
    $( '.step-links #next' ).click( function(e) {
        e.preventDefault();
        url = ($( '.step-links #next' )[0].href);
        ajax_get_update();
    });
});

当我删除 .ajaxStop 函数时，jQuery 对分页页面可见，但随后分页本身出现错误，因为它不会让我超过第二页。

我想在每个分页页面上运行的jQuery：

$(document).ready(function delete_blog(){
$("a[name^='delete-blog']").on("click", function(event){
    event.preventDefault();
    //alert($(this).attr('href'));
    $.ajax({
        url: $(this).attr('href'),
        type: "POST",
        data: {
            "csrfmiddlewaretoken":"{{csrf_token}}"
            },

        success: function(response){

            window.location.href = "some url";
        },
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    });
});

});

有什么解决方法吗？如果您需要更多信息，请告诉我。 请回复：P 没有人回答我的最后一个问题： https://stackoverflow.com/questions/24639390/django-pagination-context-variables-are-lost-in-pages-other-than-first-page 但没关系，这可能是一个愚蠢的问题，也可能是这个问题，但请帮忙。谢谢:)

Answer 1

您应该以另一种方式绑定处理程序。您正在链接到 .on 或 .click 处理程序的对象，仅在页面加载时计算一次（这就是您需要 ajaxStop 的原因）。如果您将它们连接到document（或其他静态、不可更改的元素），它们会很好地工作：

$(document).on("click", "#prev", function(event){});
$(document).on("click", "#next", function(event){});
$(document).on("click", "a[name^='delete-blog']", function(event){});

附：不要使用.class #id 选择器，它们非常慢。 #OnlyID 更好。