gpt4 book ai didi

php - 类型错误:$(...) 不是函数

转载 作者:行者123 更新时间:2023-11-28 20:33:25 24 4
gpt4 key购买 nike

我使用 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 中返回结果。返回的数据是一个 table ,这就是我试图让我的函数工作的地方。该表附加了一个表排序器脚本,还附加了我的函数。

表格排序器仍然可以正常工作,但是当我单击其中包含“删除”的单元格时没有任何反应。我使用 FireBug 来查看这个问题,它给了我错误,“TypeError: $(...).deleterow is not a function”

以下是主页面的代码,用户在其中提交表单并将结果加载到 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 中的页面代码。这是表排序器工作的页面,但我无法让我的功能工作。我还确保将这些脚本库包含在该 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');
});

jsFiddle

关于php - 类型错误:$(...) 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15904984/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com