1

我正在尝试将新创建的部分添加到现有的部分列表中，该列表在我的create.js.erb控制器操作响应中呈现，滚动到该项目并通过突出显示它或其他内容来指示新添加会非常好。我已经掌握了客户端javascript中滚动部分的窍门，但是在部分渲染之后出现的所有效果create.js.erb都没有运行。有很多这种可能的例子，我只是不确定为什么我的不起作用。

第一次尝试：create.js.erb

$('#allTab').removeClass('active');
$('#activeTab').addClass('active');
$('#completeTab').removeClass('active');
// TODO: Make sure that li below gets an id="campaign_####" before this render happens.
$('#activeTabList').append("<li><%= escape_javascript(render partial: 'fundraisers/fundraiser', locals: {f: @fundraiser, g: @group}) %></li>")
var number_li = $('#activeTabList li').length;
var $newcampaigndiv = $('#activeTabList li').last().children("panel");
$('#number_of_campaigns').text('Campaigns (' + number_li + ')');
$("body").animate({
    scrollTop: $newcampaigndiv.offset().top
}, {
    duration: 600,
    queue: false
});
$('#activeTabList li').last().children("panel").effect('highlight');

第二次尝试：create.js.erb

$('#allTab').removeClass('active');
$('#activeTab').addClass('active');
$('#completeTab').removeClass('active');
// TODO: Make sure that li below gets an id="campaign_####" before this render happens.
$.when($('#activeTabList').append("<li><%= escape_javascript(render partial: 'fundraisers/fundraiser', locals: {f: @fundraiser, g: @group}) %></li>")).done(function () {
    var number_li = $('#activeTabList li').length;
    var $newcampaigndiv = $('#activeTabList li').last().children("panel");
    alert('gets here at least');
    $('#number_of_campaigns').text('Campaigns (' + number_li + ')');
    $("body").animate({
        scrollTop: $newcampaigndiv.offset().top + $newcampaigndiv.height() / 4 - $(window).height() / 2
    }, {
        duration: 600,
        queue: false
    });
    $('#activeTabList li').last().children("panel").effect('highlight');
});

我很犹豫要不要问这个问题，因为我不反对接受我只是没有正确遍历 dom 的事实，但我一直在尝试各种组合以使其正确。

还：

如果我尝试嵌入更多的 ruby​​ 来设置<li>周围部分的 id，它会破坏整个动作并且不会渲染部分。知道我在这里缺少什么吗？

4

0 回答 0