如何在使用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'）返回undefined。 因此，对于这个特定的选择器，我需要.ready之类的东西来告诉我何时可以使用DOM。
我知道在要将事件附加到动态内容时必须使用.on，但是我的问题仅在于没有事件立即触发的指令，而只是立即滚动。

谢谢您的帮助。

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

1 / chk（）函数由Submit事件触发
2 /内部chk（），$。ajax将在数据库中添加一些数据，假设它是div内容
3 /如果成功，如果php不返​​回错误（data.err），它将触发我的回调函数lambda（）
4 / lambda（）将在$（'＃bloc_com'）上显示新的div内容+旧的div内容（= data.com），这是一个更新功能
5 /当lambda（）完成时，我希望动画能够滚动到$（'＃'+ data.new_id）

.ajax完成工程，但是$ .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（）函数的末尾应位于的结尾，也没有必要将滚动条放在此处lamba（）函数。

解决问题的最简单方法是将jQuery提供的“ complete”函数放在lambda（）函数中，但是您在此处使用$ .get函数，但它不提供complete选项。 可以像使用chk（）一样，通过使用更灵活的$ .ajax函数来轻松解决，但是要使用type：“ GET”代替使用type：“ POST”。

这样，您就可以使用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);
);

如果您想看看http://jsfiddle.net/HcvL3/，我也在那里砍了一些jsfiddle

Answer 2

您可以将您的函数包装到一个构造中，该构造将在您的ajax调用完成时触发。

$( document ).ajaxComplete(function() {
  //your function
});

ajaxComplete参考

否则，您可以使用.when（）构造以不同的方式获得相同的结果

示例：当两个ajax请求都成功时，执行函数myFunc；如果两个请求均出错，则执行myFailure。

例：

在两个ajax请求成功之后执行一个函数。 （有关ajax请求的成功和错误情况的完整描述，请参见jQuery.ajax（）文档）。

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) )
  .then( myFunc, myFailure ); 

当参考

Answer 3

您可以使用ajaxSuccess（ http://api.jquery.com/ajaxSuccess/ ）查看ajax调用何时完成。

像这样：

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

Answer 4

当ajax完全完成时，您必须设置动画，请尝试以下操作：

    function testAjax(handleData) {
  $.ajax({
    url:"yourURL",  
    success:function(data) {
       $('html, body').animate({
    scrollTop: $('#new_id').offset().top
}, 500);
    }
  });
}

Answer 5

只有在实际创建新元素之后，您才能访问它。 使用ajax.done

$.ajax({
  ....
})
  .done(function( data ) {
    $('html, body').animate({
    scrollTop: $('#new_id').offset().top
    }, 500);
  });

每当Ajax请求完成时，jQuery都会触发ajaxComplete（）事件。 因此，最好使用这种方式，而不要使用ajaxComplete（）。 这将仅对此ajax调用执行。