Jquery - 脚本冲突 [英] Jquery - Scripts are conflicting
问题描述
在我的父页面中，我使用jquery来操作选项卡区域，并将内容（prices.php）加载到其中一个选项卡中。这是该页面上的脚本：
$（document）.ready（function（）{
$（ #tabcontent> div）。hide（）; //最初隐藏所有内容
$（＃tabs li：first）。attr（id，current）; //激活第一个标签
$（＃tabcontent div：first）。fadeIn（）; //显示第一个标签内容
$（'＃tabs a'）。click（function（e）{
e.preventDefault（）;
if（$（this）.closest（li）。attr（id）==current）{//检测当前标签
返回
}
else {
$（＃tabcontent> div）。hide（）; //隐藏所有内容
$（＃tabs li）。attr id，）; //重置id的
$（this）.parent（）。attr（id，current）; //激活这个
$（'＃' $（this）.attr（'name'））。fadeIn（）; //显示当前标签的内容
}
））;
$（'＃prices'）。load '../prices_test.php?hid=<?php echo $ hid;？>'）;
}）;
prices.php也使用Jquery在单击按钮时显示隐藏区域。由于该按钮位于可能会重复执行多次的do循环中，因此我使用$ i并在循环中放置脚本：
< td height =30pxcolspan =3align =rightstyle =padding-right：20px>
< a href =javascript：void（）class =click<？php echo $ i？> buttonSearchList>& nbsp;& nbsp;查询或预订< / a>
< script>
$（a.click<？php echo $ i？>）。click（function（）{
$（。hiddenstuff<？php echo $ i？>）。slideDown （1000），
$（a.click<？php echo $ i？>）.fadeOut（500）;
}）;
< / script>
< / td>
< / tr>
< / table>
< div class =hiddenstuff<？php echo $ i？>风格= 显示：无 >
< - hiddenstuff的内容 - >
Hiddenstuff 在我运行价格时正确显示。 PHP直接在浏览器中，但不是当它是父页面的一部分。因此我假设这两个脚本之间存在冲突。父页面包括
$（'＃tabs a'）
并且有
$（a.click< php echo $ i？>）
在prices.php中。这些冲突吗？如果是这样，我该如何预防它？我已经尝试在 a.click $ i 附近添加额外的课程，但这并没有帮助。
解决方案
我将脚本从载入ajax的页面移到了父页面，并将第一行重新写为：
$（＃prices）。on（'click'，'a.click'，function（）{
我不得不放弃$ i位，所以只要点击其中的一个，脚本就会对代码的所有实例执行操作。我不想这样离开，但我正在保存如果有2个或更多的jQuery被导入到你的页面上，那么每个实例可以覆盖以前加载的名称空间，根据内容的加载方式以及其他版本的加载情况，较新的文件可能会覆盖事件绑定的$名称空间。 .jquery.com / jQuery.noConflict /rel =nofollow> noConflict（）函数。这个人可以做一些事情，他可以将jQuery的实例完全移出全局上下文，并将其推送到本地变量中。
var jQ = jQuery.noConflict（true）;
jQ（'。someClass'）。click（function（）{
// do stuff
}）;
或者它可以简单地删除对 $ 快捷方式。这意味着当我们想引用该版本的jQuery时，我们需要使用 jQuery 而不是 $ 。
$。noConflict（）;
jQuery（'。someSelector'）。click（function（）{
// more stuff doing
}）;
In my parent page I use jquery to operate a tabbed area and also to load content (prices.php) into one of the tabs. This is the script on that page:
$(document).ready(function() {
$("#tabcontent > div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#tabcontent div:first").fadeIn(); // Show first tab content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return
}
else{
$("#tabcontent > div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
}
});
$('#prices').load('../prices_test.php?hid=<?php echo $hid;?>');
});
prices.php also uses Jquery to reveal a hidden area when a button is clicked. As the button is inside a do loop that might be repeated several times, I use $i and have the script inside the loop:
<td height="30px" colspan="3" align="right" style="padding-right:20px">
<a href="javascript:void()" class="click<?php echo $i ?> buttonSearchList"> Enquire or Book</a>
<script>
$("a.click<?php echo $i ?>").click(function() {
$(".hiddenstuff<?php echo $i ?>").slideDown(1000),
$("a.click<?php echo $i ?>").fadeOut(500);
});
</script>
</td>
</tr>
</table>
<div class="hiddenstuff<?php echo $i ?>" style="display:none">
<-- Content of "hiddenstuff" -->
Hiddenstuff reveals correctly when I run prices.php directly in the browser, but not when it is a part of the parent page. Therefore I'm assuming that there is a conflict between the two scripts. The parent page includes
$('#tabs a')
and there is
$("a.click<?php echo $i ?>")
in prices.php. Are these conflicting? If so, how do I prevent it? I've tried putting an extra class around a.click$i but that didn't help.
SOLUTION I moved the script from the ajax-loaded page to the parent page and re-wrote the first line as:
$("#prices").on('click', 'a.click', function() {
I've had to drop the "$i" bit, so the script acts on all instances of the code whenever one of them is clicked. I don't want to leave it that way, but I'm saving that for the Mk2 version. Thanks to all who replied.
If 2 or more jQuery's are being imported onto your page each instance can be overwriting the previously loaded namespace. Depending on how the content is loaded and when the other versions are being loaded the newer files may overwrite the $ namespace that events have been bound to. Checkout the noConflict() function. This guy can do a few things, he can remove the instance of jQuery completely out of the global context and push it to a local var.
var jQ = jQuery.noConflict(true);
jQ('.someClass').click(function(){
// do stuff
});
or it can simply remove a dependence on the $ shortcut. This means we need to use jQuery instead of $ when we want to reference that version of jQuery.
$.noConflict();
jQuery('.someSelector').click(function(){
// more stuff doing
});
这篇关于Jquery - 脚本冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
