Question

我需要这两个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"));  
 }

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

TypeError：$未定义   $ .extend（{   jquery .... rter.js（第89行）// jquery.tablesorter.js

TypeError：$未定义
  $ .extend（（   jquery .... ager.js（第2行）// jquery.tablesorter.pager.js

TypeError：$不是函数
  $（文件）。就绪（函数（）   tableso ... 2）.html（第19行）// tablesorter（2）.html

Answer 1

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

Answer 2

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

var myJQ = jQuery.noConflict();

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

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

如果＆＃34;添加行内容＆＃34;你所指的只是你在问题中的jQuery代码，然后它应该可以正常使用1.10.2，所以你应该只能使用那个版本。我建议你摆脱1.3.1版本的jQuery，只使用1.10.2版本。它应该满足你的需求。

仅供参考，我在您的代码中犯了一个错误。您正在尝试添加不应该执行的重复id="tdAdd" <input>个标记。如果你想拥有多个这样的元素，那就使用一个类，而不是id。

Answer 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 $

调用jquery-1.10.2.js时jquery-1.3.1.min.js无法正常工作

3 个答案: