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

Question

我使用Ajax动态创建类似于100 div的一个名为lambda（）的函数然后我想用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想要将事件附加到动态内容时必须使用。但我的问题仅针对没有事件立即触发的指令，只是立即滚动。

感谢您的帮助。

编辑：详细＆amp;纯化代码：

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

.ajaxComplete WORKS但$ .when（）+ .done（）/。then（）NO！ 但是，我在这个页面上有其他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提供的“完整”功能放在lambda（）函数中，但是你在那里使用$ .get函数并且它不提供完整的选项。这可以通过使用更灵活的函数$ .ajax轻松解决，就像你使用chk（）一样，但不使用类型：“POST”你会使用类型：“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/

Answer 2

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

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

ajaxComplete Reference

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

示例：当两个ajax请求成功时执行myFunc函数，或者如果其中一个请求有错误，则执行myFailure。

示例：

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

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

when Reference

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调用执行。