未捕獲的類型錯誤：undefined不是函數 - Javascript

我試圖用JavaScript和jQuery創建一個簡單的待辦事項列表，其中一個主要功能是能夠在兩個狀態之間切換任何列表項目等待或完成）通過點擊事件。未捕獲的類型錯誤：undefined不是函數 - Javascript

下面是頁面的標記：

<body> 
    <div id = 'page'> 
     <h2>To Do Items</h2> 
     <form id = 'itemForm'> 
      <input type='text' id='itemDesc' placeholder='Add Item' /> 
      <input type='submit' id = 'addBtn' value ='ADD' /> 
     </form> 
     <ul> 
      <li class ='pending'>First item</li> 
      <li>Second item</li> 
      <li>Third item</li> 
     </ul> 
    </div> 
<script type="text/javascript" src='jquery-1.11.2.js'></script> 
<script type="text/javascript" src='todoScriptjQuery.js'></script> 
</body>

這裏是添加和切換功能的腳本： $（函數（）{ /ADD列表項/ 變量$的newitem = $（ '＃itemDesc'）; 變量$ itemForm = $（ '＃itemForm'）; 變量$項目值;

$itemForm.on('submit', function (e){ 
    e.preventDefault(); 
    $itemValue = $('<li class = "pending">'); 
    $itemValue.append($newItem.val()); 
    $clear = $('<img class = "icon-invisible">'); 
    $clear.attr('src', 'Images/png/clear.png'); 
    $itemValue.append($clear); 

    $('ul').prepend($itemValue); 
}); 




/*TOGGLE BETWEEN COMPLETE AND PENDING STATE*/ 
$('li').on('click', function(e){ 
    var $target = e.target; 
    e.preventDefault(); 

    switch($target.attr('class')) { 
     case 'pending': 
      doneItem($target); 
      break; 
     case 'completed': 
      revertItem($target); 
      break; 
    } 
}); 


function doneItem($target) { 
    $target.attr('class', 'completed'); 
} 

function revertItem($target) { 
    $target.attr('class', 'pending'); 
} });

I」的問題m的含義是，切換功能在控制檯中記錄一條錯誤消息： Uncaught TypeError: undefined is not a function在switch語句開始的那一行。我已經添加了一個條件，只是爲了確認我的jQuery加載正確，而且確實如此。所以我有點失落，接下來要嘗試什麼。

任何指針都會有幫助。謝謝

來源

2015-01-16 Harry

e.target是一個DOM元素，而不是一個jQuery對象，所以沒有attr()方法，因此undefined錯誤。你需要將其轉換爲一個jQuery對象：

var $target = $(e.target);

來源

2015-01-16 10:45:02

謝謝。那就是訣竅。非常感激！ – Harry

沒問題，很樂意幫忙。 –

您需要將目標對象轉換爲jQuery對象在使用它之前與.attr()

var $target = $(e.target); 
e.preventDefault();

來源

2015-01-16 10:45:04

哇你們快.. –

是的，他們是!!!!! :)它的工作。多謝你們！ – Harry

與jQuery包裝你e.target這樣，它應該工作

$('li').on('click', function(e){ 
var $target = $(e.target); 
e.preventDefault(); 

switch($target.attr('class')) { 
    case 'pending': 
     doneItem($target); 
     break; 
    case 'completed': 
     revertItem($target); 
     break; 
} 
});

來源

2015-01-16 10:47:46 Rajat

謝謝。我沒有將事件包裝爲jQuery對象。它現在有效。 – Harry

未捕獲的類型錯誤：undefined不是函數 - Javascript

回答

相關問題