为什么此 Code Magazine 示例在 Chrome 中失败（仅）？

Question

我从this Code Magazine article 下载了示例代码。它是在 html 表单中单击提交按钮时的进度指示器。它适用于 Firefox 和 IE，但在 Chrome 中，提交永远不会完成。按钮文本从 Save 更改为 Saving... 并且永远不会恢复为 Save。由于某种原因，该表格从未发布过。这是提交按钮：

<button type="submit" id="submitButton" class="btn btn-primary" onclick="return DisplayProgressMessage(this, 'Saving...');">
    Save
</button>

这是脚本：

<script>
    function DisplayProgressMessage(ctl, msg) {
        $(ctl).prop("disabled", true);
        $(ctl).text(msg);

        return true;
}

Answer 1

这可能与Content Security Policy for Google Chrome（如果您启用了扩展程序）有关，它可能会禁用内联事件，例如onclick。

除此之外，代码不会将元素恢复为 Save，因为您没有告诉它这样做。

方法分解：

$(ctl) 将引用按钮

• 你禁用它
• 您将文本设置为“正在保存”
• 你从 功能

您没有告诉它将文本重置为“保存”

如果更改代码结构，它的行为完全相同

var $button = $("#submitButton");

$button.on("click", function() {
     DisplayProgressMessage(this, "saving...");
});

function DisplayProgressMessage(ctl, msg) {
   $(ctl).prop("disabled", true);
   $(ctl).text(msg);

   return true;
}

https://jsfiddle.net/xzq701r9/