TypeError：$（...）不是函数

我已经使用jQuery来创建一个页面，用户可以点击表格中的一个单元格，说“删除”，它会发送一个ajax请求来删除根据单元格的id从数据库中输入内容，然后它会改变CSS来隐藏单元格。

我在创建/调整jQuery代码时创建了一个测试页。此页完美地工作。下面是代码：

<html> 
<head> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    (function($){ 
$.fn.deleterow = function(event) { 
    if (!confirm('Are you sure you want to delete this student?')) { 
     return false; 
    } 
    var id = event.target.id; 
    $.ajax({ 
      url: 'delete.php', 
      type: 'GET', 
      data: 'id=' + id, 
     }); 
    $(this).parent().css('display', 'none'); 
} 
})(jQuery); 
}); 
</script> 

</head> 


<table border="1"> 
<tr> 
<td>Cell 2, Row 2</td><td onclick="$(this).deleterow(event);" id="13376">delete</td> 
</tr> 
</table> 

<html>

现在我努力让代码在实际的页面，它会在使用工作这个页面有一个简短的形式，用户可以选择他们的名字和日期。这个表单发送一个ajax请求，以div的形式返回结果。返回的数据是一张表格，而这正是我试图让我的功能起作用的地方。这个表格附有一个tablesorter脚本，同时附带了我的功能。

tablesorter仍然正常工作，但没有任何反应，当我点击其中的“删除”的单元格。我用FireBug来看看这个问题，它给了我错误，“TypeError：$（...）。deleterow不是一个函数”

这是用户提交表单的主页面的代码和其中结果加载在一个div中：

<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type='text/javascript' src='jquery.tablesorter.js'></script> 
<script type='text/javascript'> 
$(document).ready(function() 
    { 
     $('#myTable').tablesorter(); 
    } 
); 
</script>"; 
</head> 

<body id="my-students"> 
<?php include 'header.php'; ?> 

<?php include 'nav-tutoring.php'; ?> 

<div id="content"> 
This is where you can view students whom you have assigned to tutoring. 
<p> 

You may change the way each column is sorted by clicking on the column header. 
<p> 
<b>Select your name and the date to view students you have assigned for that day.</b> 

<form> My form is here; removed to make post shorter </form> 

<script> 
$('#submit').click(function() 
{ 
    $.ajax({ 
     type: 'POST', 
     url: "mystudents.php", 
     data: $('#name').serialize(), 
     success: function(data) { 
      $("#list").empty(); 
      $('#list').append(data); 

     } 
    }); 
       return false; 
}); 
</script> 

<div id="list"></div>

以下是插入表单下面div的页面的代码。这是tablesorter工作的页面，但我无法让我的功能正常工作。我也确保将这些脚本库包含在这个div所在的主页的头部。

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> 
<script type='text/javascript' src='jquery.tablesorter.js'></script> 
<script type='text/javascript'> 
$(document).ready(function() 
    { 
     $('#myTable').tablesorter(); 

(function($) { 
$.fn.deleterow = function(event) { 
    if (!confirm('Are you sure you want to delete this student?')) { 
     return false; 
    } 
    var id = event.target.id; 
    $.ajax({ 
      url: 'delete.php', 
      type: 'GET', 
      data: 'id=' + id, 
     }); 
    $(this).parent().css('display', 'none'); 
} 
})(jQuery); 

}); 
</script> 

<table id='myTable' class='tablesorter' border="1"> 
<thead><tr><th>ID Number</th><th>Last</th><th>First</th><th>Tutoring<br>Assignment</th><th>Assigning Teacher</th><th>Delete?</th></tr></thead><tbody> 

<?php 
while($row = mysql_fetch_array($data)){ 
    echo "<tr><td>".$row['id']. "</td><td>". $row['last']. "</td><td>". $row['first']."</td><td>". $row['assignment']."</td><td>". $row['assignteacher']."</td><td onclick='$(this).deleterow(event);' id='".$row['pk']."'>Delete</td></tr>"; 

} 
?> 
</tbody></table>

我已经根据我得到的错误做了很多搜索，但我似乎无法解决问题。任何帮助将不胜感激。

来源

2013-04-09 Austin Dennis

检查在控制台中，如果你正确地下载jQuery脚本在页面加载。 – 2013-04-09 14:42:32

您应该在'

测试如果jQuery的控制台加载（检查jQuery变量）...

你应该换你的代码是这样的：

(function($){ 
     $(document).ready(function(){ 

      $.fn.deleterow = function(event) { 
        if (!confirm('Are you sure you want to delete this student?')) { 
         return false; 
        } 
        var id = event.target.id; 
        $.ajax({ 
         url: 'delete.php', 
         type: 'GET', 
         data: 'id=' + id, 
        }); 
        $(this).parent().css('display', 'none'); 
      } 
     }); 
})(jQuery);

但最重要的是检查的jQuery加载正确解决这个问题...

希望它能帮助

来源

2013-04-09 14:49:47 fernandosavio

尝试重写一个通常的javascript函数

function deleterow(id) {...}

，并在PHP

echo "<tr><td>".$row['id']. "</td><td>". $row['last']. "</td><td>". $row['first']."</td><td>". $row['assignment']."</td><td>". $row['assignteacher']."</td><td onclick='deleterow(".$row['id']. ")' id='".$row['pk']."'>Delete</td></tr>";

来源

2013-04-09 14:50:29 Alex

这是由于这样的：

<td onclick='$(this).deleterow(event);'

JavaScript不能认为这是一个函数，由于封闭'。

我建议这样做是：

<td class='deleterow'>

然后

$(body).on('click', '.deleteRow', function(event) { 
    $(this).deleterow(event); 
});

来源

2013-04-09 14:50:49

你会更好结合使用jQuery的左撇子代替的onclick，这是不良做法的事件。例如：

$('#myTable').on('click', 'td', function(e) { 
    $(this).deleterow(e); 
});

来源

2013-04-09 14:51:22

TypeError：$（...）不是函数

相关问题