javascript - 未捕获的类型错误未定义不是函数

Question

我是 JQuery 新手，不知道如何处理像 uncaught TypeError: undefined is not a function 这样的错误。我不知道如何按顺序排列下面的 jQuery 代码。有人可以安排一下顺序吗...

@model Mvc4_WebGrid_CRUD.Models.PagedCustomerModel
@{
ViewBag.Title = "WebGrid CRUD Operations";
WebGrid grid = new WebGrid(rowsPerPage: Model.PageSize);
grid.Bind(Model.Customer,
          autoSortAndPage: false,
          rowCount: Model.TotalRows
); 
}   
    <style type="text/css">
    #grid {
    clear: both;
    width: 80%;
    margin: 0px;
    border: 1px solid #c7c5c7;
}
    #grid thead, #grid tfoot td {
        text-align: left;
        font-weight: bold;
        height: 35px;
        color: #000;
        background-color: #d2d0d2;
        border-bottom: 1px solid #e2e2e2;
    }

    #grid td {
        padding: 4px 6px 0px 4px;
        vertical-align: top;
        background-color: #f5f5f5;
        border-bottom: 1px solid #e2e2e2;
    }

input {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 2px 0 2px 0px;
    padding: 2px;
    width: 170px;
}
 </style>   
 <script src="~/Scripts/jquery-1.8.2.js"></script>
 <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
 <script type="text/javascript">
$(document).ready(function () {
//Here is where I get the error
    $("#results").dialog({
    autoOpen: false,
    title: 'Title',
    draggable: false,
    width: 500,
    height: 400,
    model: true,
    success: function () {
        alert('working fine');
    }
});
});
function openPopup() {
    $("#results").dialog("open");
}
</script>

下面的代码工作正常

<script type="text/javascript">
$(".add").live("click", function () {
    var existrow = $('.save').length;
    if (existrow == 0) {
        var index = $("#grid tbody tr").length + 1;
        var Name = "Name_" + index;
        var Address = "Address_" + index;
        var ContactNo = "ContactNo_" + index;
        var Save = "Save_" + index;
        var Cancel = "Cancel_" + index;
        var tr = '<tr class="alternate-row"><td></td><td><span> <input id="' + Name + '" type="text" /></span></td>' +
             '<td><span> <input id="' + Address + '" type="text" /></span></td>' +
             '<td><span> <input id="' + ContactNo + '" type="text" /></span></td>' +
             '<td> <a href="#" id="' + Save + '" class="save">Save</a><a href="#" id="' + Cancel + '"  class="icancel">Cancel</a></td>' +
         '</tr>';

        $("#grid tbody").append(tr);
    }
    else {
        alert('First Save your previous record !!');
    }
});
$(".icancel").live("click", function () {
    var flag = confirm('Are you sure to cancel');
    if (flag) {
        $(this).parents("tr").remove();
    }
});
$(".save").live("click", function () {
    var id = $("#grid tbody tr").length;
    var Name = $("#Name_" + id).val();
    var Address = $("#Address_" + id).val();
    var ContactNo = $("#ContactNo_" + id).val();

    if (id != "") {
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("SaveRecord", "Home")',
            data: { "name": Name, "address": Address, "contactno": ContactNo },
            dataType: "json",
            beforeSend: function () { },
            success: function (data) {
                if (data.result == true) {
                    $("#divmsg").html("Record has been saved successfully !!");
                    setTimeout(function () { window.location.replace("WebGridCRUD"); }, 2000);
                }
                else {
                    alert('There is some error');

                }

            }

        });
    }
});
$(".edit").live("click", function () {
    var str = $(this).attr("id").split("_");
    id = str[1];
    var Name = "#Name_" + id;
    var spanName = "#spanName_" + id;
    var Address = "#Address_" + id;
    var spanAddress = "#spanAddress_" + id;
    var ContactNo = "#ContactNo_" + id;
    var spanContactNo = "#spanContactNo_" + id;
    $(Name).show();
    $(spanName).hide();
    $(Address).show();
    $(spanAddress).hide();
    $(ContactNo).show();
    $(spanContactNo).hide();
    $(this).hide();
    $("#Update_" + id).show();
    $("#Cancel_" + id).show();
});
$(".cancel").live("click", function () {
    var str = $(this).attr("id").split("_");
    id = str[1];
    var Name = "#Name_" + id;
    var spanName = "#spanName_" + id;
    var Address = "#Address_" + id;
    var spanAddress = "#spanAddress_" + id;
    var ContactNo = "#ContactNo_" + id;
    var spanContactNo = "#spanContactNo_" + id;

    $(Name).hide();
    $(spanName).show();
    $(Address).hide();
    $(spanAddress).show();
    $(ContactNo).hide();
    $(spanContactNo).show();

    $(this).hide();
    $("#Update_" + id).hide();

    $("#Edit_" + id).show();
});

$(".update").live("click", function () {
    var str = $(this).attr("id").split("_");
    id = str[1];

    var Name = $("#Name_" + id).val();
    var spanName = $("#spanName_" + id).val();
    var Address = $("#Address_" + id).val();
    var spanAddress = $("#spanAddress_" + id).val();
    var ContactNo = $("#ContactNo_" + id).val();
    var spanContactNo = $("#spanContactNo_" + id).val();
    if (id != "") {
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("UpdateRecord", "Home")',
            data: { "id": id, "name": Name, "address": Address, "contactno": ContactNo },
            dataType: "json",
            beforeSend: function () {//alert(id);
            },
            success: function (data) {

                if (data.result == true) {
                    $("#Update_" + id).hide();
                    $("#Cancel_" + id).hide();
                    $("#Edit_" + id).show();

                    var Name = "#Name_" + id;
                    var spanName = "#spanName_" + id;
                    var Address = "#Address_" + id;
                    var spanAddress = "#spanAddress_" + id;
                    var ContactNo = "#ContactNo_" + id;
                    var spanContactNo = "#spanContactNo_" + id;

                    $(Name).hide();
                    $(spanName).show();
                    $(Address).hide();
                    $(spanAddress).show();
                    $(ContactNo).hide();
                    $(spanContactNo).show();

                    $(spanName).text($(Name).val());
                    $(spanAddress).text($(Address).val());
                    $(spanContactNo).text($(ContactNo).val());
                }
                else {
                    alert('There is some error');
                }
            }

        });
    }
});

$(".delete").live("click", function () {
    var str = $(this).attr("id").split("_");
    id = str[1];

    var flag = confirm('Are you sure to delete ??');
    if (id != "" && flag) {
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("DeleteRecord", "Home")',
            data: { "id": id },
            dataType: "json",
            beforeSend: function () { },
            success: function (data) {

                if (data.result == true) {
                    $("#Update_" + id).parents("tr").remove();
                }
                else {
                    alert('There is some error');
                }
            }

        });
    }
});
</script>
<div id="divmsg" style="color: green; font-weight: bold"></div>
<a href="#" class="add">Add New</a>
<br />
<br />
@grid.GetHtml(
htmlAttributes: new { id = "grid" },
fillEmptyRows: false,
mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
 columns: new[] {

    grid.Column("CustID", 
                header: "ID", canSort: false),
    grid.Column(header: "Name",format: @<span> <span id="spanName_@item.CustID">@item.Name</span> @Html.TextBox("Name_"+(int)item.CustID,(string)item.Name,new{@style="display:none"})</span>),
    grid.Column(header: "Address",format: @<span> <span id="spanAddress_@item.CustID">@item.Address</span> @Html.TextBox("Address_"+(int)item.CustID,(string)item.Address,new{@style="display:none"})</span>),
    grid.Column(header: "Contact No",format: @<span> <span id="spanContactNo_@item.CustID">@item.ContactNo</span> @Html.TextBox("ContactNo_"+(int)item.CustID,(string)item.ContactNo,new{@style="display:none"})</span>),
    grid.Column(header: "Action",format:@<text>
<a href="#" id="Edit_@item.CustID" class="edit">Edit</a>
<a href="#" id="Update_@item.CustID" style="display:none" class="update">Update</a>
<a href="#" id="Cancel_@item.CustID" style="display:none"  class="cancel">Cancel</a>
<a href="#" id="Delete_@item.CustID"  class="delete">Delete</a>
<a href="#" id="Details_@item.CustID" class="details">Details</a>
@Ajax.ActionLink("Ajax Link","AjaxView",new{Id=@item.CustID},new AjaxOptions    { HttpMethod="GET",UpdateTargetId="results",
 InsertionMode= InsertionMode.Replace, OnSuccess="openPopup"})

<div id="dialog-detail" style="display: none">
</div>

</text>)
})
<div class="dialog"></div>
<div class="results" style="display:none;"></div>

当我尝试打开上面代码中的对话框时，我刚刚收到错误。我可以找到 Uncaught Error 。可能是因为 jQuery 没有按顺序休息，一切都很好。谁能把上面的顺序排列一下。非常感谢

Answer 1

您有一个明显的问题可能会导致问题。您的 HTML 有一个带有 class="results" 的 div，但您的选择器显示 #results (即查找带有 id="results" 的元素)

您可以将选择器更改为.results(正如@VeldMuijz在评论中建议的那样)，但是您还有一个Ajax ActionLink 需要一个 id，因为它指定 UpdateTargetId="results"

而是将 id 添加到结果 div 中。

例如更改此:

<div class="results" style="display:none;"></div>

对此:

<div id="results" style="display:none;"></div>

对于 MVC 项目，我还建议您将 JS 代码放在单独的 JS 文件中。 Visual Studio 无法在同一 View 中同时调试 Razor 和 Javascript，但如果脚本位于其自己的文件中，则可以。