Jquery: ajaxstart is not working for dynamically created elements

Question

My Html looks like this.

   <div id="buildSelectionDialog" title="Select Build" >
        <div id="buildsListWrapper">
            <table id="buildsListTable" class="dataTable" cellpadding="0" cellspacing="0" border="1px solid #fff" width="100%">
                <thead>
                    <tr>
                        <th>Build</th> <th>Type</th> <th>Time</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

            <input type="hidden" id="dialogPurpose" name="data" value="" />
        </div>
</div>

The contents of the table will be populated dynamically using ajax and there are many such tables. Now, I am supposed to modify the code to add a spinner which should be displayed while ajax is working. I added a script which looks like below by referring This link. I created a div which has spinner image to be displayed.

<script>

var $loading = $('#loadingDiv').hide();

$(document)
  .ajaxStop(
    function () { $loading.hide(); }

    )
  .ajaxStart(
    function () { console.log("ajax called"); $loading.show(); }

    );

</script>

This is not working. I don't know why. If I add spinner to each ajax requests by using beforeSend and complete everything works fine. But I what want is that I want the spinner image to be displayed when ajax request is working. How can I achieve this.