jQuery：计算live jquery中的top

Question

http://jsfiddle.net/xHE3S/

有12个李。每行包含3个li。所以会有四行。

我正在做的是首先从ul计算每个li位置，然后使用ajax获取产品数据。 Ajax数据显示在点击的li下面的新行中。

要显示通过ajax创建的新li，我正在应用top。现在问题从这里开始。

对于第一行，它正好在row1

下方正确显示

现在，当我点击第2行产品时，它将再次计算距离并将顶部应用于新创建的li。当用户点击任何其他li时，先前创建的元素被删除。因此，在距离计算中，它还计算新创建的li所覆盖的空间。因此第二行li将显示在row3 li上，因为错误顶部

这是我的代码：

jQuery(function () {
    jQuery('.products li a').click(function (e) {
        e.preventDefault();
        jQuery('li.new-rows').remove();
        var relativeY = jQuery(this).offset().top - jQuery('ul.products').offset().top;
        jQuery.ajax({
            url: links,
            beforeSend: function () {
                alert('Yes');
            },
            success: function (data) {

                var dd = jQuery(data).find('#content .product').html();
                if (jQuery('.products li.new-rows').length == 0) {
                    jQuery('.products').append('<li class="new-rows"></li>');
                    jQuery('.new-rows').html('<div class="data-len">' + dd + '</div>');
                    jQuery('.new-rows').css({
                        top: relativeY + 280
                    });
                } else {
                    jQuery('.new-rows').html(dd);
                    jQuery('.new-rows').css({
                        top: relativeY + 280
                    });
                }

            }


            )
        };)
    };)
};

在此屏幕中，您可以看到它正确地正确

虽然在这里它是计算li所覆盖的高度，使用ajax创建。   所以最重要的是增加它。你可以看到它正在进行第三排。

Answer 1

＆lt; - 删除旧代码 - ＆gt;

这是你想要的吗？ http://jsfiddle.net/pn3dx/

我使用了Pete关于使用after的建议。我使用$(this)来获取用户点击的li：

$('li').click(function(){
    $(this).after('<li class="new-rows">new</li>');
});

编辑：

如果您希望添加的li具有相同的功能，请使用delegate() http://jsfiddle.net/pn3dx/3/

$('ul').delegate('li', 'click', function(e){
    $(this).after('<li class="new-rows">new</li>');
});