jQuery无法在HTML中工作

I'm trying to do a jquery ajax tutorial but I'm not able to get it to work.

 $(document).ready(function () {
        //var theme = getDemoTheme();

        var url = "http://localhost/schoollife/services/getchapters.php?a=showdata";

        // prepare the data
        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'curriculam_type', type: 'string' },
                { name: 'class_type', type: 'string' },
                { name: 'subject_type', type: 'int' },
                { name: 'chapter_name', type: 'string' },
                { name: 'chapter_number', type: 'int' },
                { name: 'author_name', type: 'string' },
                { name: 'reviewer_name', type: 'int' }                
            ],
            //id: 'id',
            url: url
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        $("#jqxgrid").jqxGrid(
        {
            width: 940,
            source: dataAdapter,
            //theme: theme,
            columnsresize: true,
            columns: [
              { text: 'Curriculum', datafield: 'curriculam_type', width: 100 },
              { text: 'Class', datafield: 'class_type', width: 100 },
              { text: 'Subjects', datafield: 'subject_type', width: 100 },
              { text: 'Chapter', datafield: 'chapter_name', width: 160 },
              { text: 'Chapter Number', datafield: 'chapter_number', cellsalign: 'center',width: 60},
              { text: 'Content Author', datafield: 'author_name'},
              { text: 'Content Reviewer', datafield: 'reviewer_name'},
               { text: 'Edit', datafield: 'Edit', width: 60, cellsrenderer: function () {
                 return '<div style="width:100%"><a href="edit_chapters.html", class="edit_chapters fancybox.iframe"><img src="../images/edit.png"  style="margin-left: 25%"/></a></div>';
             }, 
             },
                { text: 'Delete', datafield: 'delete', width: 60, cellsrenderer:function () {
                 return "<div style='width:100%'><a href='javascript:void(0)' class='**delbutton**'><img src='../Images/delete.png'  style='margin-left:25%'/></a></div>";
             }, 
             },

          ]
        });


 $(document).ready(function() {
    $(".**delbutton**").click(function(){ 
        alert('sdsdsd');

            alert('Are You sure you want to delete!');
             evt.preventDefault();
            var id=this.href;
            var url='http://localhost/schoollife/services/getchapters.php?a=deletechapter&chapter_id='+data[i].id;
            $.messager.confirm('Confirm','Are you sure you want to delete record?');
                $.ajax({
                    cache:false,
                    dataType:'json',
                    url:'http://localhost/schoollife/services/getchapters.php?a=deletechapter&chapter_id='+data[i].id,
                    async:false,
                    success:function(data){
                        alert(data);
                    }
                })

        });
    });
    });

If I do the same in a .js file I wouldn't have any problem. What am I missing here? Thanks

Well, what about <script> tag:

<script>
  //js code here
</script>

You need of course to place it after including jquery.

you have to close }); first document on load function . and consider about open bracket and close bracket