Javascript Jquery:ajaxstart不适用于动态创建的元素

我的Html看起来像这样

   <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>

构建类型时间

表的内容将使用ajax动态填充，并且有许多这样的表。现在，我应该修改代码以添加一个微调器，该微调器应该在ajax工作时显示。我通过引用添加了一个脚本，如下所示。我创建了一个具有要显示的微调器图像的div

<script>

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

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

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

    );

</script>

var$loading=$（'#loadingDiv'）.hide（）；
$（文件）
.ajaxStop(
函数（）{$loading.hide（）；}
)
.ajaxStart(
函数（）{console.log（“调用了ajax”）；$loading.show（）；}
);

这是行不通的。我不知道为什么。如果我通过使用

beforeSend

和

complete

向每个ajax请求添加微调器，那么一切都会正常工作。但我想要的是，我希望在ajax请求工作时显示微调器图像。如何实现这一点。

function（）{$loading.hide（）；}=>function（）{$（'#loadingDiv'）。hide（）function（）{$loading.hide（）；}=>function（）{$（'#loadingDiv'）。hide（）