在Dynamics365嵌入式iframe web资源中使用加载微调器

Question

我正试图在Dynamics365应用程序的嵌入式iframe中使用加载微调器。我正在使用此库：https://loading.io/button/.我可以看到CSS的加载是正确的，因为当有一个类在button/div元素上运行时，它会显示旋转图标。

我想做的是在点击按钮时将"running"类添加到按钮中，这样用户就知道某个操作正在发生，他们应该期待在不久的将来会发生一些事情。然而，当我有代码将"running"类添加到按钮时，它似乎不起作用。这是我的代码：

$("#retakeButton").on("click", function () {
$("#retakeButton").addClass('running');
\\\ LOGIC GOES HERE \\\
$("#retakeButton").removeClass('running');
});

这是我的HTML:

<div id="outerBorder" class="container embed-responsive ">
<div class="col-md-12" id="topbuttons">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<div type="button" id="retakeButton" class="btn btn-primary hovering ld-over">
<strong>Take Photo</strong>
<div class="ld ld-ring ld-spin-fast"></div>
</div>
</div>
</div>
</div>
<div id="carousel" class="slideshow-container"></div>
<br>
<div id="dots" style="text-align:center"></div>
</div>

奇怪的是，如果我打开控制台并选择iframe作为目标，我可以通过运行$("#retakeButton").addClass('running');来显示正在进行的动画。然而，它似乎在HTML引用的javascript中不起作用。

Answer 1

我刚刚测试了它，它可以工作。

为了清晰可见，我为div添加了一个边界，还注释了removeClass以进行测试(可能太快了，无法注意到(。

<div id="div_loader" class="btn btn-default ld-ext-top" style="border:solid; font-size:2em">
<div class="ld ld-ring ld-spin-fast"></div>
</div>
$("#div_loader").on("click", function () {
$("#div_loader").addClass('running');
//do some logic
//$("#retakeButton").removeClass('running');
});

最后一件事。问题可能由类hovering引起——您可以删除&测试您的代码。