jquery waypoints post上的上下文问题

Question

我已经设置了路点，以便在触发时执行 json 发布，但是网络服务器从未收到请求。我收到以下 jquery 错误。

TypeError：上下文为空 http://mysite 5082行

我知道航点会影响上下文，因为如果我删除航点，我可以执行 post call。 我也尝试过删除所有数据和成功操作。

谁能看到我做错了什么？谢谢。

$(document).ready(function() {
        $('.product_row').waypoint(getDisplayRow);
});
function getDisplayRow()
{
    var search_url = window.location.protocol + "//" + window.location.host + window.location.pathname;
    var codes = [];
    $(this.element).children().each(function() {
        codes.push($(this).attr('product_id'));
    });
    $.post('/ajax/getproductdisplayrow/', {codes: codes,
        subcategory_url: $('#subcategory_url').val(),
        category_url: $('#category_url').val(),
        show_color_squares: $('#show_color_squares').val(),
        search_url: search_url
    }, function(data) {
            $(this.element).before(data); 
            $(this.element).remove();
            adjustRowHeight();
    });
}

这也不行

$(document).ready(function() {
        $('.product_row').waypoint(getDisplayRow);
});
function getDisplayRow()
{
    $.post('/ajax/getproductdisplayrow/', {
    }, function(data) {
    });
}

我有最新版本的航点，还有 jquery

Answer 1

在您对 POST 的回调中：

function(data) {
  $(this.element).before(data); 
  $(this.element).remove();
  adjustRowHeight();
});

this 不再是 Waypoint 实例。我相信这是帖子中的 jqXHR 实例。 this.element 返回未定义，谁知道当您尝试调用 before 时会发生什么。您可以将此元素属性存储在外部函数内的变量中，并在 POST 回调中使用它：

function getDisplayRow()
{
  var search_url = window.location.protocol + "//" + window.location.host + window.location.pathname;
  var codes = [];
  var $waypointElement = $(this.element);
  $waypointElement.children().each(function() {
    codes.push($(this).attr('product_id'));
  });
  $.post('/ajax/getproductdisplayrow/', {codes: codes,
    subcategory_url: $('#subcategory_url').val(),
    category_url: $('#category_url').val(),
    show_color_squares: $('#show_color_squares').val(),
    search_url: search_url
  }, function(data) {
    $waypointElement.before(data); 
    $waypointElement.remove();
    adjustRowHeight();
  });
}