Javascript-форум - Динамическая форма. Удаление элементов.

Заинтересовался jQuery, нашел пример взаимодействия скриптов с PHP, пытаюсь разобраться. PHP форма (без всякой мишуры):

print '
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="adddeldata.js"></script>
<body>
<div class="content_wrapper">
<ul id="responds">';
echo '<li id="item_'.$row["id"].'">';
echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$row["id"].'">';
echo 'Удалить нах!';
echo '</a></div>';
echo $row["content"].'</li>';
print '
</ul>
<div class="form_style">
<textarea name="content_txt" id="contentText" cols="45" rows="5"></textarea>
<button id="FormSubmit">Add record</button>
</div>
</div>
</body>';

Файл adddeldata.js

$(document).ready(function() {
                    $("#FormSubmit").click(function (e) {
                            e.preventDefault();
                            if($("#contentText").val()==='')
                            {
                                alert("Введите текст!");
                                return false;
                            }
                            var myData = 'content_txt='+ $("#contentText").val(); //build a post data structure
                            jQuery.ajax({
                            type: "POST", // HTTP method POST or GET
                            url: "response.php", //Where to make Ajax calls
                            dataType:"text", // Data type, HTML, json etc.
                            data:myData, //Form variables
                            success:function(response){
                                $("#responds").append(response);
                                $("#contentText").val(''); //empty text field on successful
                            },
                            error:function (xhr, ajaxOptions, thrownError){
                                alert(thrownError);
                            }
                            });
                    });


                    $("body").on("click", "#del .del_button", function(e) {
                         e.returnValue = false;
                         var clickedID = this.id.split('-'); //Split string (Split works as PHP explode)
                         var DbNumberID = clickedID[1]; //and get number from array
                         var myData = 'recordToDelete='+ DbNumberID; //build a post data structure

                            jQuery.ajax({
                            type: "POST", // HTTP method POST or GET
                            url: "response.php", //Where to make Ajax calls
                            dataType:"text", // Data type, HTML, json etc.
                            data:myData, //Form variables
                            success:function(response){
                                //on success, hide  element user wants to delete.
                                $('#item_'+DbNumberID).fadeOut("slow");
                            },
                            error:function (xhr, ajaxOptions, thrownError){
                                //On error, we alert user
                                alert(thrownError);
                            }
                            });
                    });

                    // для первых трех
                    $("body").on("click", "#responds .del_button2", function(e) {
                                $(this).parent('div').parent('li').fadeOut("slow");
                    });


                });

Так вот добавление проходит на "Ура", а удаление не работает. Chrome матюкается на $("body").on("click", "#del .del_button", function(e) {
Говорит, мол, Uncaught TypeError: undefined is not a function...
И извечный вопрос...Что делать?