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>
我已经根据我得到的错误做了很多搜索,但我似乎无法解决问题。任何帮助将不胜感激。
首先,在document.ready中包含$.fn.deleterow = function(event) {
是没有意义的。您应该将该方法移出该方法。
个人而言,我会更改代码以不依赖表中的内联事件处理程序。你正在使用jQuery,所以利用它。使用事件冒泡来获得优势。
将它添加到表级别并监听有ID的td上的点击事件。
$("table tbody").on("click", "td[id]", function(e){
if (!confirm('Are you sure you want to delete this student?')) {
return false;
}
var id = this.id;
$.ajax({
url: 'delete.php',
type: 'GET',
data: 'id=' + id,
});
$(this).parent().css('display', 'none');
});
谢谢。这工作完美。 – 2013-04-09 15:44:03
测试如果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加载正确解决这个问题...
希望它能帮助
尝试重写一个通常的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>";
这是由于这样的:
<td onclick='$(this).deleterow(event);'
JavaScript不能认为这是一个函数,由于封闭'。
我建议这样做是:
<td class='deleterow'>
然后
$(body).on('click', '.deleteRow', function(event) {
$(this).deleterow(event);
});
你会更好结合使用jQuery的左撇子代替的onclick,这是不良做法的事件。例如:
$('#myTable').on('click', 'td', function(e) {
$(this).deleterow(e);
});
检查在控制台中,如果你正确地下载jQuery脚本在页面加载。 – 2013-04-09 14:42:32
您应该在'
上添加一个'type =”text/javascript“'属性@基本:没有必要。根据HTML4规范,这是必需的,但[所有浏览器都使用默认值'text/javascript'](http://*.com/a/9659074/60590)。 [在HTML5中,它可以省略,标准规定默认值...'text/javascript'。](http://www.w3.org/TR/html5/scripting-1.html#script) – Martijn 2013-04-09 14:49:14