I have ajax pages more than one and I want to load my ajax page after scroll how can I do this ? I have a simple basic structure and I want to load my ajax after scroll like infinite scroll or lazy images.

```js
$('.lazy_content').on('load', function (e) {

            data_url = $(this).attr("data-url");
            data_id = $(this).attr("data-target-id");

            $.ajax({
                url: data_url,
                type: "POST",
                beforeSend: function () {
                    $(".loaderDiv").show();
                    $("#" + data_id).html("");
                },
                success: function (data) {
                    　$(data).each(function(index, el) {
                     $(".loaderDiv").hide();
                     $("#" + data_id).html(data);
                 });
                }

            })

        });
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lazy_content" data-url="/ajax/comments/aurum-didyma-spa-beach-resort" data-target-id="comments-content">
  <h4>COMMENTS</h4>
  <div id="comments-content" class="content-target"></div>
</div>
```