使用 bgStretcher 时可能发生 jQuery 冲突
在将 bgStretcher 添加到自定义 WordPress 主题之前，我已经设置了一个测试 html 页面来使用 bgStretcher。当我使用 jQuery 版本时它工作正常：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
on ，但是当我使用 Wordpress 中包含的版本时它停止工作：
<script type="text/javascript" src="http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script>
我在两个文件之间看到的唯一区别是 WP 版本在最后防止 jQuery 冲突，调用 noConflict ()。
页面（下面的 html）加载了第一张图像，但随后控制台输出错误：
Uncaught TypeError: Cannot read property 'fn' of undefined （匿名函数）
实时版本位于：http://pebbl.es/test/test .关于如何解决这个问题有什么想法吗？我可以看到这是一个冲突错误，但我看不到在哪里/如何修复它？非常感谢。
<html>
<head><title>Test</title>
<script type='text/javascript' src='http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
<script type="text/javascript" src="bgstretcher.js"></script>
<link rel="stylesheet" type="text/css" href="bgstretcher.css">
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('body').bgStretcher({
images: ['Rochy_Coleccion1.jpg', 'Rochy_Coleccion2.jpg'], imageWidth: 1024, imageHeight: 748
});
});
</script>
</head>
<body>
</body>
</html>
I have setup a test html page to play with bgStretcher before adding it to a custom Wordpress theme. It works fine when I use the jQuery version:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
on , but it stops working when I use the version included in Wordpress:
<script type="text/javascript" src="http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script>
The only difference I've seen between the two files is that the WP version prevents jQuery conflicts at the end, calling noConflict().
The page (html below) loads the first image, but then the console outputs an error:
Uncaught TypeError: Cannot read property 'fn' of undefined
(anonymous function)
The live version is on: http://pebbl.es/test/test .Any ideas on how to fix this? I can see it is a conflict error, but I can't see where/how to fix it? Many thanks.
<html>
<head><title>Test</title>
<script type='text/javascript' src='http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
<script type="text/javascript" src="bgstretcher.js"></script>
<link rel="stylesheet" type="text/css" href="bgstretcher.css">
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('body').bgStretcher({
images: ['Rochy_Coleccion1.jpg', 'Rochy_Coleccion2.jpg'], imageWidth: 1024, imageHeight: 748
});
});
</script>
</head>
<body>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
为您的 jQuery 命名空间： http://api.jquery.com/jQuery.noConflict/
添加此内容在两个脚本标签之间：
在此之后，您的 1.6.1 jQuery 将处于无冲突模式。
您必须在此之后使用您的变量名称来调用它，例如
$my_jq('#content')UPDATE
这可能不起作用，我看到您没有加载 2 个不同的jQuerys，当尝试将 bgstretcher 与已经处于 noConflict 模式的 jQuery 一起使用时，会出现问题。
我不是 WordPress 专家，但您可能只需更改 WordPress jQuery 以使用您的变量名称。您可以将 jQuery 设置为 noConflict 模式，无论是否将其命名空间为变量，看起来您的 WordPress JQ 都没有这样做。
或者您可以首先加载您自己的 jQuery，命名它，然后将其用于 bgstretch。
问题是 noConflict 调用再次“释放” $ 变量，以便与也想使用它的不同框架一起使用，因此您的 bgstretch 在尝试调用 $ 时会出现错误。
或者尝试完全删除 noConflict 并看看它是否对您的 WordPress 安装有任何影响（应该不会，我想这只是为了让 WP 用户也能够使用不同的 JS 框架）。
希望你能解决。
Namespace your jQuery: http://api.jquery.com/jQuery.noConflict/
add this between the two script tags:
after this, you have your 1.6.1 jQuery in no conflict mode.
you will have to call it using your variable name after this, e.g.
$my_jq('#content')UPDATE
this might not work, I see you are not loading 2 different jQuerys, your problem occurs when trying to use bgstretcher with an jQuery that is already in noConflict mode.
I am not a wordpress expert, but you might just change the wordpress jQuery to use your variable name. You can set jQuery in noConflict mode with or without namespacing it to a variable and it looks like your wordpress JQ does it without.
Or you can first load your own jQuery, namespace it and then use this for bgstretch.
The problem is that the noConflict call "frees" the $ variable again for use with different frameworks that also want to make use of it, so your bgstretch gets an error when trying to call $.
Or just try to remove the noConflict completly and see if it has any effect on your wordpress installation (it should not, I guess it is just for the purpose of giving WP users the ability to use different JS frameworks as well).
Hope you work it out.