调用 jquery-1.10.2.js 时 jquery-1.3.1.min.js 不工作答案

【问题标题】：jquery-1.3.1.min.js not working when jquery-1.10.2.js was called调用 jquery-1.10.2.js 时 jquery-1.3.1.min.js 不工作
【发布时间】：2014-06-20 02:29:06
【问题描述】：

我需要这两个 js 文件，一个用于添加行，另一个用于 tablesort 和 pager。我的问题是两个脚本都不起作用，如果它们都被调用的话。

这是我目前的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
    <title>jQuery plugin: Tablesorter 2.0</title>
    <link rel="stylesheet" href="./css/style.css" type="text/css" />
    <script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="./js/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="./js/jquery.tablesorter.pager.js"></script>
    <script >
    
    $(document).ready(function() 
    { 
    $(document).on("click","#tdAdd",function(){
          var newRow = $("<tr>");
          var cols="";
        cols+='<td><input type="button" id="tdAdd" value="+"/></td>';
        cols+='<td><input type="button" class="tdDelete" value="-"/></td>';
        cols+='<td><input type="text"  value="enter data here"/></td>';
        newRow.append(cols);
        newRow.insertAfter($(this).closest("tr"));
    });
     
    });
</script>
</head>
<body>
<table id="insured_list" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Age</th> 
    <th>Premium Amount</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Mendes</td> 
    <td>Domnic</td> 
    <td>domnic@gmail.com</td> 
    <td>29</td> 
    <td>5500</td> 
</tr> 
 <tr>
            <td>
                <input type="button" id="tdAdd" value="+"/>
            </td>
            <td>
                <input type="button" class="tdDelete" value="-"/>
            </td>
            <td>
                <input type="text" name="name"  value="anything"/>
            </td>
        </tr>
</tbody> 
</table> 
<div id="pager" class="pager">
    <form>
        <img src="images/first.png" class="first"/>
        <img src="images/prev.png" class="prev"/>
        <input type="text" class="pagedisplay"/>
        <img src="images/next.png" class="next"/>
        <img src="images/last.png" class="last"/>
        <select class="pagesize">
            <option value="">LIMIT</option>
            <option value="2">2 per page</option>
            <option value="5">5 per page</option>
            <option value="10">10 per page</option>
            
        </select>
    </form>
</div>
    
<script defer="defer">
    $(document).ready(function() 
    { 
        $("#insured_list")
        .tablesorter({widthFixed: true, widgets: ['zebra']})
        .tablesorterPager({container: $("#pager")}); 
    } 
    ); 
</script>
</body>
</html>

如果我添加这个，对于我的延迟脚本。两个脚本都不起作用。：

<script type="text/javascript" src="./js/jquery-1.3.1.min.js"></script>

编辑：

<script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
<script type="text/javascript">
var j1 = $.noConflict(true);
</script>
<script type="text/javascript" src="./js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
var j2 = $.noConflict(true);
</script>
<script type="text/javascript" src="./js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="./js/jquery.tablesorter.pager.js"></script>
<script >

$(document).ready(function() 
{ 
    
 j2("#insured_list")
    .tablesorter({widthFixed: true, widgets: ['zebra']})
    .tablesorterPager({container: $("#pager")});

j1("#tdAdd").click(function(){
X();
});
});
function X(){

     var newRow = $("<tr>");
     var cols="";
    cols+='<td><input type="button" id="tdAdd" value="+"/></td>';
    cols+='<td><input type="button" class="tdDelete" value="-"/></td>';
    cols+='<td><input type="text"  value="enter data here"/></td>';
    newRow.append(cols);
    newRow.insertAfter($(this).closest("tr"));  
 }

这是我尝试的当前脚本，当我尝试运行它时，萤火虫说：

TypeError: $ 未定义 $.扩展（{ jquery....rter.js (line 89) // jquery.tablesorter.js

类型错误：$ 未定义
$.扩展（（ jquery....ager.js (line 2) // jquery.tablesorter.pager.js

类型错误：$ 不是函数
$(文档).ready(函数() tableso...2).html (line 19) // tablesorter(2).html

【问题讨论】：

需要在任何其他 js 脚本之前添加 JQuery 库。
您现在看到的错误是因为您使用.noConflict() 删除符号$，但插件仍在尝试使用$，因此它们不起作用。让我们弄清楚如何让一个版本的 jQuery 工作，而不是试图弄清楚如何让两个版本工作。请参阅我的答案中的 cmets 了解后续步骤。
jquery-1.3.1 - 2009 年 1 月发布。我认为是时候弄清楚如何摆脱这种依赖了

标签： javascript jquery paging

【解决方案1】：

我之前已经解决了这个问题，好吧，我的错，但是当我重新下载jquery-1.3.1.min.js 文件时，js file 都工作正常。所以，我建议当您尝试使用插件并遇到相同问题时，请仔细检查您的来源及其文件大小。

【讨论】：

或者将该库升级到现代的东西。

【解决方案2】：

如果不使用如下语法为每个版本分配不同的符号，则无法加载两个版本的 jQuery：

var myJQ = jQuery.noConflict();

在加载第二个之前的第一个，然后仅使用myJQ 变量来引用第一个（请参阅答案here）。

更好的办法是让你的两个插件都使用相同版本的 jQuery，这样你就可以只加载一个，而不必做这些额外的操作。

如果您所指的“添加行内容”只是您的问题中的 jQuery 代码，那么在 1.10.2 中应该可以正常工作，因此您应该只能使用该版本。我建议你摆脱 jQuery 的 1.3.1 版本，只使用 1.10.2 版本。它应该满足您的两个需求。

仅供参考，我在您的代码中出现了一些错误。您正在尝试添加不应该做的重复的 id="tdAdd" <input> 标签。如果您想拥有多个这样的元素，请使用类，而不是 id。

【讨论】：

但是当我只使用 1.10.2 时，只能添加行，而不是 tablesorter 和 pager。
@Niang - tablesorter here 表示它与任何版本的 jQuery 1.2.1 或更高版本兼容。您应该能够将 1.10.2 与您的两段代码一起使用。我建议您最初不要在任何脚本标签上使用defer 或async 属性来混淆事物。然后，首先加载 jQuery，然后加载任何插件，然后运行您自己的使用这些插件的 JS，并确保您自己的 jQuery 位于 $(document).ready() 块内或位于您的 HTML 之后。
@Niang - “不会工作”也不是一点点描述性的。做一些基本的调试。告诉我们浏览器调试日志中显示了哪些错误，放入一些console.log() 语句以查看您的代码是否正在运行以及是否有任何错误等...
使用 jquery 1.10.2 时。只有添加功能有效。当我使用 1.3.1 时。并删除添加行的代码，表格排序和分页将起作用。
@Niang - 将.noConflict() 与别人的插件一起使用是相当复杂的。我不建议你那样做。当您只加载没有 .noConflcit() 语句的 jQuery 1.10.2 时会发生什么。您的两段代码都应该只适用于那个版本的 jQuery。如果它不起作用，请发布您看到的错误。

【解决方案3】：

使用喜欢

在您的一个 jquery 上方使用 <script>jQuery.noConflict();</script> 并将 $ 替换为 jQuery

试试

<script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
<script>jQuery.noConflict();</script>
<script type="text/javascript" src="./js/jquery-1.3.1.min.js"></script>//Now replace this jQuery with $

【讨论】：