Jquery - 脚本冲突答案

【问题标题】：Jquery - Scripts are conflictingJquery - 脚本冲突
【发布时间】：2014-03-02 08:03:38
【问题描述】：

在我的父页面中，我使用 jquery 来操作选项卡区域，并将内容 (prices.php) 加载到其中一个选项卡中。这是该页面上的脚本：

$(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 还使用 Jquery 在单击按钮时显示隐藏区域。由于按钮位于可能重复多次的 do 循环内，因此我使用 $i 并将脚本放在循环内：

<td height="30px" colspan="3" align="right" style="padding-right:20px">
    <a href="javascript:void()" class="click<?php echo $i ?> buttonSearchList">&nbsp;&nbsp; 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 当我直接在浏览器中运行 price.php 时正确显示，但当它是父页面的一部分时则显示不正确。因此，我假设两个脚本之间存在冲突。父页面包括

$('#tabs a')

还有

$("a.click<?php echo $i ?>")

在价格.php 中。这些有冲突吗？如果是这样，我该如何预防？我尝试在 a.click$i 周围增加一个额外的类，但这没有帮助。

解决方案我将脚本从 ajax 加载页面移动到父页面，并将第一行重写为：

$("#prices").on('click', 'a.click', function() {

我不得不删除“$i”位，因此只要单击其中一个，脚本就会作用于代码的所有实例。我不想这样，但我将其保存为 Mk2 版本。感谢所有回复的人。

【问题讨论】：

尝试向#tabs a 元素添加一个类，然后将该类放入选择器中。
不确定我是否理解正确。我为构成标签的
元素中的所有元素添加了一个类：
- Description

【解决方案1】：

如果将 2 个或更多 jQuery 导入到您的页面上，则每个实例都可能覆盖先前加载的命名空间。根据加载内容的方式以及加载其他版本的时间，较新的文件可能会覆盖事件已绑定到的 $ 命名空间。查看noConflict() 函数。这家伙可以做一些事情，他可以将 jQuery 的实例完全从全局上下文中移除，并将其推送到本地 var。

var jQ = jQuery.noConflict(true);
jQ('.someClass').click(function(){
   // do stuff
});

或者它可以简单地删除对$ 快捷方式的依赖。这意味着当我们想要引用该版本的 jQuery 时，我们需要使用 jQuery 而不是 $。

$.noConflict();
jQuery('.someSelector').click(function(){
   // more stuff doing
});

【讨论】：