javascript - 如何触发使用 Ajax 动态创建的元素上的指令？

Question

我使用 Ajax 使用名为 lambda() 的函数动态创建类似 100 个 div 的内容，然后我想使用 Jquery 在新的 div (id='new_id') 之一上滚动，但失败了，因为当我

//lambda()//<--create $('#new_id') dynamically
$('html, body').animate({
    scrollTop: $('#new_id').offset().top
}, 500);

被触发，DOM没有及时更新并且$('#new_id')返回未定义。 因此，我需要像 .ready 这样的特定选择器来告诉我 DOM 何时可以使用。
我知道当您想要将事件附加到动态内容时必须使用 .on，但我的问题仅适用于立即触发的指令，没有事件，只是立即滚动。

感谢您的帮助。

编辑:详细和纯化的代码:

1/chk() 函数由提交事件触发
2/在chk()内部，$.ajax会在DB中添加一些数据，假设这是一个div内容
3/如果成功，如果php没有返回错误(data.err)，它会触发我的回调函数lambda()
4/lambda() 将在 $('#bloc_com') 上显示新的 div 内容 + 旧的 (=data.com)，这是一个更新函数
5/当 lambda() 完成后，我希望动画能够向上滚动到 $('#'+data.new_id)

.ajaxComplete 有效，但 $.when() + .done()/.then() 不行! 但是，我在此页面上还有其他 ajax 函数，并且所有这些函数都会触发 .ajaxComplete，但这不是我想要的。

function lambda(p){
    var b=$('#bloc_com');
    var com_in=$('#com_in');

    $.get('ajax/com_pagination.php',{p:p},function(data)
        {
            b.html(data.com);//update the webpage
        },'json'
    ).fail(function() {
        com_in.html("<span class='erreur222'>Error system. If the problem persists, please contact the administration.</span>");
    });
    return false;
}

function chk(){
    var err=$('#err_com');

    $.when($.ajax({
        type:'post',
        url:'ajax/com_chk.php',
        data:{id:id,dt:time,cm:com},
        success:function(data)
        {
            err.html(data.err);//display error
            if(data.err=='')
            {
                var p=1;
                lambda(p);//callback function that will display the 100 div with the new one which this ajax call adds in DB

                //.ajaxComplete works here!
                /*$(document).ajaxComplete(function() {
                    $('html, body').animate({
                        scrollTop: $('#'+data.new_id).offset().top
                    }, 500);
                });*/
            }
        },
        dataType:'json'
    })).then(function() {
        alert('done method fired!');//it's working
        $('html, body').animate({
            scrollTop: $('#'+data.new_id).offset().top//return undefined
        }, 500);
    });
    return false;
}

Answer 1

您走在正确的轨道上，但您必须考虑谁知道什么能够在最佳时机滚动。

知道何时通过 AJAX 添加到页面上的 html 元素的函数不是 chk() 函数，因此将滚动放在那里没有意义，即使 chk() 函数的结尾应该在之后lba() 函数结束。

解决问题的最简单方法是将 jQuery 提供的“完整”函数放入 lambda() 函数中，但是您在那里使用 $.get 函数，并且它不提供完整选项。这可以通过使用更灵活的函数 $.ajax 轻松解决，就像使用 chk() 一样，但不使用 type:"POST"，而是使用 type:"GET"。

有了这个，你可以使用ajax提供的完整功能来准确地知道你的元素何时在DOM中准备好，它看起来像这样

$.ajax(
type:"GET",
url:'ajax/com_pagination.php'
data:{p:p}
success:function(data)
    {
        b.html(data.com);//update the webpage
    },
'json'
error:function() {
    com_in.html("<span class='erreur222'>Error system. If the problem persists, please contact the administration.</span>");
},
complete:function(){
    $('html, body').animate({
        scrollTop: $('#'+data.new_id).offset().top
    }, 500);
);

如果你想看看的话，我还在那里编写了一些jsfiddle http://jsfiddle.net/HcvL3/