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

相關問題