在Dynamics 365嵌入式iframe Web资源中使用加载微调器

Question

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

我想做的是在单击按钮时将“ 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类上-您可以删除并测试您的代码。