Jquery：它的類已被刪除後，函數繼續執行元素

Question

我想在模糊最後一個輸入後將行添加到表中。它工作得很好，但每次模糊任何輸入時，它都會添加一個新行。下面是代碼：

<script type="text/javascript"> 
var i = 1; 
$(function() { 
$('#addNew').click(function() { 

$('input').removeClass('last'); 

$('#all_items tr:last').after('<tr><td><input type="text" name="item_'+i+'" id="items_'+i+'" class="last field" /></td><td>and other input fields</td></tr>'); 

$.ajax({ 
    url: "js/autocomplete.php?count="+i, 
    success: function(newhtml){ 
     newhtml += "<"; 
     newhtml += "/script>"; 
     $("head").append(newhtml); 
    } 
}); 

i++; 
}); 

//on blur click on addNew 
$('.last').blur(function() { 
$('#addNew').trigger('click'); 
}); 

}); 
</script> 

autocomplete.php是這樣的：

<script> 
    $(function() { 
    //this section autocompletes the rows. Disregard for this question 
    var data = [-data retrieved by a function, working well!-]; 
    $("#items_'.$count.'").catcomplete({ delay: 0, source: data, 
     select: function(event, ui) { 
      $("#price_'.$count.'").val(ui.item.price); 
      $("#category_'.$count.'").val(ui.item.category); 
     } 
     }); 
    }); 

$(".last").blur(function() { 
    $("#addNew").trigger("click"); 
}); 
</script> 

和HTML：

<span id="addNew">Add Item</span> 

<table id="all_items"> 
<tr id="header"><th>Item</th><th>Note</th><th>Quantity</th><th>Price</th></tr> 
<tr id="first"><td><input type="text" name="item_0" id="items_0" class="last text" /></td> 
    <td><input type="text" name="item_note_0" id="item_note_0" /></td> 
    <td><input type="number" name="quantity_0" id="quantity_0" value="1" /></td> 
    <td><input type="text" name="price_0" id="price_0" /> 
     <input type="hidden" name="category_0" id="category_0" /></td></tr> 
</table> 

通過檢查元素（鉻），我可以看到這個類的最後一次「被刪除，但這些字段仍然在表格末尾添加一行/輸入，當我模糊它們時。我究竟做錯了什麼？我怎樣才能避免他們保持這種行爲？

Answer 1

當您從元素中刪除class時，事件附有類last的元素。您必須事件unbind以及從元素中移除類。您可以使用unbind()從元素中刪除事件。

$('.last').unbind();