jQuery ScrollTop After Delay

Question

This code is working nicely to create smooth scroll to the next anchor on my page.

    <script type="text/javascript">  
    $("#blockTwo").on("click", ".child", function( e ) {
         $('html, body').delay(800).animate({
         scrollTop: $('#scrollThree').offset().top
         }, 1500, "swing"); 
    });
    </script>

However, because the content in the anchor element is being loaded via ajax after the click event the animation has a jump mid way through. I thought I could circumnavigate this issue by adding a delay to the animation so that the content is loaded before the animation begins. Not sure if this is either a good idea or feasible?

Thanks

Answer 1

You'll have to place the event listener on the parent and have it bubble up once the element is placed on the page via ajax.

Notice the 2nd parameter of on():

$(".parentElement").on("click", ".child", function( e ) {

Thus, for your specific example:

$("#blockOne").on("click", ".child", function( e ) {

This way, when .click gets loaded in via the ajax, it'll have a listener given to it by its static parent #blockOne. Hope that makes sense.