Fatal编程技术网
  • javascript/
  • Javascript 调用jquery-1.10.2.js时jquery-1.3.1.min.js不工作

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

javascript jquery

Javascript 调用jquery-1.10.2.js时jquery-1.3.1.min.js不工作,javascript,jquery,paging,Javascript,Jquery,Paging,我需要这两个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="h

我需要这两个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>


jQuery插件：Tablesorter 2.0
$（文档）.ready（函数（）
{ 
$（文档）。在（“单击”，“添加”，函数（）上）{
var newRow=$（“”）；
var cols=“”；
cols+=''；
cols+=''；
cols+=''；
newRow.append（cols）；
newRow.insertAfter（$（this.closest（“tr”））；
});
});
姓
名字
电子邮件
年龄
保险费金额
门德斯
多姆尼克
domnic@gmail.com 
29
5500
极限
每页2张
每页5张
每页10张
$（文档）.ready（函数（）
{ 
$（“投保人名单”）
.tablesorter（{widthFixed:true，小部件：['zebra']}）
.tablesorterPager（{container:$（“#pager”）}）；
} 
);
如果我添加这个，对于我的延迟脚本。两个脚本都不起作用

<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"));  
 }
 


变量j1=$.noConflict（真）；
var j2=$.noConflict（真）；
$（文档）.ready（函数（）
{ 
j2（“投保单”）
.tablesorter（{widthFixed:true，小部件：['zebra']}）
.tablesorterPager（{container:$（“#pager”）}）；
j1（#tdAdd”）。单击（函数（）{
X（）；
});
});
函数X（）{
var newRow=$（“”）；
var cols=“”；
cols+=''；
cols+=''；
cols+=''；
newRow.append（cols）；
newRow.insertAfter（$（this.closest（“tr”））；
}
这是我尝试的当前脚本，当我尝试运行它时，firebug说：

TypeError:$未定义 $扩展({ jquery….rter.js（第89行）//jquery.tablesorter.js

TypeError:$未定义
$扩展(( jquery….ager.js（第2行）//jquery.tablesorter.pager.js

TypeError:$不是一个函数
$（文档）.ready（函数（） html（第19行）//tablesorter（2.html

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

var myJQ = jQuery.noConflict();
在加载第二个变量之前加载第一个变量，然后仅使用
myJQ
变量引用第一个变量（参见答案）

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

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

仅供参考，我在您的代码中出现了一个错误。您正在尝试添加重复的
id=“tdAdd”
标记，但您不应该这样做。如果您希望有多个这样的元素，请使用类，而不是id。
使用like

在一个jQuery上使用
jQuery.noConflict（）；
，并将
$
替换为
jQuery

试一试



jQuery.noConflict（）；
//现在将这个jQuery替换为$

我以前已经解决了这个问题，
是我的错，但是当我重新下载
jquery-1.3.1.min.js
文件时，两个
js文件都可以正常工作。因此，我建议

当您尝试使用插件并遇到相同问题时，请仔细检查源代码及其文件大小。
需要在任何其他js脚本之前添加JQuery库。您现在看到的错误是因为您使用的是
.noConflict（）
删除符号
$
，但插件仍在尝试使用
$
，因此它们不起作用。让我们了解如何使一个版本的jQuery工作，而不是试图了解如何使两个版本工作。有关下一步，请参阅我答案中的注释。jQuery-1.3.1-于2009年1月发布。我认为是时候让您了解我想知道如何摆脱这种依赖关系，但是当我只使用1.10.2时，只使用add row，而不使用tablesorter和pager。@Niang-tablesorter说它与jQuery 1.2.1或更高版本兼容。你应该能够将1.10.2与两段代码一起使用。我建议你不要使用defer
或
async
处理。然后，首先加载jQuery，然后加载任何插件，然后运行使用这些属性的JS，并确保您自己的jQuery位于
$（document.ready（）
块中或在HTML之后。@Niang-也“不起作用”不是最基本的描述。请执行一些基本调试。告诉我们在浏览器调试日志中显示了哪些错误，然后放入一些
console.log（）
语句，以确定您的代码是否正在运行以及是否存在任何错误等。当使用jquery 1.10.2时，只有add函数起作用。当我使用1.3.1.并删除用于添加行的代码时，表排序器和分页将起作用。@Niang-使用
.noConflict（）
使用其他人的插件相当复杂。我不建议您这样做。如果只加载jQuery 1.10.2而不加载
.noConflcit（）会发生什么
语句。您的两段代码都应该只使用一个版本的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 $