如何解决 Smarty 中的 jQuery 加载错误
2019-11-12
262
我有一些页面脚本会产生一个常量
ReferenceError: $ is not defined
错误。
jQuery 加载在 html 页面底部的标签之前。我添加了一个 DOM 监听器，以便代码可以等待 JQuery 加载。你能看到任何错误吗，代码如下。
Webpack 配置：
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
console.log 1 有效，console.log 2 无效
{literal}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM loaded and parsed 1'); // Works!
if ($('.add-user').length) {
const addUser = (callbackFunction) => {
const data = {
signup_name: $('#signup-name').val(),
user_name: $('#user-name').val(),
};
console.log(data);
callbackFunction();
return data;
}
}
console.log('DOM fully loaded and parsed 2'); // Doesn't Work?
});
</script>
{/literal}
3个回答
确保您已添加 jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
这可能位于页面的 HEAD 或页脚中，只需确保在尝试调用任何其他 jQuery 内容之前加载它即可。
如果仍然出现错误，请尝试添加
var $ = jQuery
。它应该可以正常工作。
Pratik Malvi
2019-11-12
这不是解决方案，但可以帮助您确定问题是否是因为 jQuery 尚未加载而引起的，如果第二个控制台日志仍然没有出现，则问题与其他问题有关。 我将代码的执行延迟了 5 秒，这足以让 jquery 在代码执行之前加载
{literal}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM loaded and parsed 1'); // Works!
setTimeout(function(){
if (jQuery('.add-user').length>0) {
const addUser = (callbackFunction) => {
const data = {
signup_name: jQuery('#signup-name').val(),
user_name: jQuery('#user-name').val(),
};
console.log(data);
callbackFunction();
return data;
}
}
console.log('DOM fully loaded and parsed 2'); // Doesn't Work?
},5000)
});
</script>
{/literal}
mondersky
2019-11-12
因此，由于 Webpack 设置，jQuery 似乎不可用。
经过一番研究，我找到了一个有助于解决错误的答案：
https://stackoverflow.com/a/46937798/10814553
安装 reveal-loader：
npm install reveal-loader --save-dev
并将其添加到 webpack.config.js
module: {
rules: [
{
// Exposes jQuery for use outside Webpack build
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
]
}
并确保您还添加了插件
plugins: [
// Provides jQuery for other JS bundled with Webpack
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
idm
2019-11-12