auto click on load more but the auto click only triggers after the first manual click

Question

I tried to add auto click on load more link, but the auto load more only triggers after the manual click. I am stuck on this. If anybody knows the solution please help.

 <?php if( $next_link !== false ):?>
        <div class="sp-load-more text-center"  >
         <a href='#'  title="Load more result" data-url="<?php echo $next_link;?>" onclick="return doko.BuSfw16AlL(this, {container: '#search-results', rc : '.sp-load-more'})">
            <span id="l-more" > Load More <i  class="fa fa-angle-down fa-lg"></i>  </span>
          </a>
            </div>

<?php else:?>
        <div class="panel sp-box sp-load-more">
                <div class="panel-body">
                <span>-- End of Result --</span> 
                </div>
        </div>
<?php endif; ?>

<script >
$(function(){ //on document ready
    $(document).scroll(function (e) { //bind scroll event

        var intBottomMargin = 300; //Pixels from bottom when script should trigger

        //if less than intBottomMargin px from bottom
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - intBottomMargin) {
            $("#l-more").click(); //trigger click
        }

    });
});
</script>

Answer 1

You need to use the id of the <a> tag, So you need to change the:

    <a href='#' id="the_id"  title=....

And:

      $("#the_id").click(); //trigger click