JQuery的.html（）有时在Chrome中表现得很奇怪

Question

我有一个按钮：

现在我在该按钮上有一个方法：

function showPreview(event) {
    var button = event.target;

    $(button).empty().html('<i class="fa fa-spinner fa-pulse"></i>');

    $.post(
        ...,
        function (data) {
            ...

            $(button).empty().html('<i class="fa fa-fw fa-file-pdf-o"></i> Preview');
        }
    );
}

有时（很少）当我点击Chrome中的按钮时，它看起来像这样：

但是当我在Chrome中检查页面检查器时，它显示只有1个图标和1＆＃34;预览＆＃34;按钮中的字符串。

我已经在其他浏览器上对此进行了测试，但没有人共享类似的错误。

浏览器我用以下方法对此进行了测试：

• Internet Explorer 11
• 火狐
• 戏
• Safari浏览器

我认为这是一个Chrome错误，这是不可接受的行为。正如您所看到的那样，在添加新内容无效之前，我已经尝试清空按钮。对于这个特定问题，还有其他解决方法吗？

这是我的JSFiddle：https://jsfiddle.net/spe0asbo/2/

请注意，这种情况很少发生。它根本不会发生在你身上。

Answer 1

为按钮指定ID并将event.target替换为按钮元素本身。

HTML：

<button id='btn01' type="button" onclick="javascript:showPreview(event);">
    <i class="fa fa-fw fa-file-o"></i> Preview
</button>

JS：

function showPreview(event) {
    var button = $('#btn01');
    $(button).attr("disabled", "disabled");
    $(button).html('<i class="fa fa-fw fa-spin fa-spinner"><i>');
    setTimeout(function() {
        $(button).html('<i class="fa fa-fw fa-file-o"></i> Preview');
        $(button).removeAttr("disabled");
    }, 2000);
}

请参阅此处的JSFiddle链接：https://jsfiddle.net/4h5pehr9/

Answer 2

只有当我双击按钮时才会发生。

检查我的更改：https://jsfiddle.net/ag0ztLna/3/

var selection = [2,10,20];

// send GET /api/user/export/file?param1=test&ids=2,10,20
Restangular.all('user').customGET('export/file',{param1:'test',ids:selection}).then(function(response) {
/*  */
        })