Question

我的项目中有6个Javascript文件，其功能完好无损。如果我使用（jscompress.com）将所有这些js文件缩小为单个文件。当我点击某个特定按钮时 - 它会被禁用。

“无法在'元素'上执行'webkitMatchesSelector'：'[test！='']：sizzle'不是有效的选择器。” 名称：“SyntaxError” stack：“错误：无法在'Element'上执行'webkitMatchesSelector'：'[test！='']：sizzle'不是

我们何时会遇到这种异常，因为这似乎与我的项目代码没有直接关系。这与缩小器有关吗？

Answer 1

此异常的发生可能有多种原因。可以像下面这样模拟异常

示例脚本：

<script type="text/javascript" src="resources/jquery.min.js" ></script> 
<script type='text/javascript'>
   $(document).ready(function() {
        $('.form').submit(function(event) {
           console.log("Form submitted");
        });
    });
</script>

在上面的示例中，如果我们删除$(document).ready(function()，则jquery将引发以下异常

Failed to execute 'webkitMatchesSelector' on 'Element': '[test!='']:sizzle' 
is not a valid selector." name: "SyntaxError" 
stack: "Error: Failed to execute 'webkitMatchesSelector' on 
'Element': '[test!='']:sizzle' is not valid selector.

如果看到此异常，请验证文档加载是否失败。

jQuery.ready()的文档供您参考：

尽管JavaScript提供了load事件，用于在呈现页面时执行代码，但是只有在完全接收到所有资产（例如图像）之后，该事件才会被触发。在大多数情况下，可以在完全构建DOM层次结构后立即运行脚本。确保传递给.ready()的处理程序将在DOM准备就绪后执行，因此通常这是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。使用依赖CSS样式属性值的脚本时，在引用脚本之前，请先参考外部样式表或嵌入样式元素，这一点很重要。

如果代码依赖于加载的资产（例如，如果需要图像尺寸），则应将代码放置在load事件的处理程序中。

使用缩小的js时出现DOM异常

1 个答案: