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

Posted 2023-05-09

【中文标题】未捕获的类型错误未定义不是函数

【英文标题】：uncaught typeerror undefined is not a function

【发布时间】：2015-03-14 18:08:48

【问题描述】：

我是 JQuery 的新手，不知道如何处理诸如未捕获 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="[e-mail]">@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="[e-mail]">@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="[e-mail]">@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="[e-mail]" class="edit">Edit</a>
<a href="#" id="[e-mail]" style="display:none" class="update">Update</a>
<a href="#" id="[e-mail]" style="display:none"  class="cancel">Cancel</a>
<a href="#" id="[e-mail]"  class="delete">Delete</a>
<a href="#" id="[e-mail]" class="details">Details</a>
@Ajax.ActionLink("Ajax Link","AjaxView",newId=@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>

当我尝试打开上述代码中的对话框时，我只是收到错误消息。我可以找到未捕获的错误。可能是因为 jQuery 不是为了休息一切都很好。谁能把上面的顺序整理一下。非常感谢

【问题讨论】：

感谢阅读............

你有最终的 html 或者我可以看的东西吗？也许您的选择器“#results”正在寻找<div id="results">，而您拥有<div class="results">。尝试使用“.resutls”选择器。

@VeldMuijz 感谢您的回复，我这样做了，但在 chrome 控制台中仍然没有出现同样的错误。你能告诉我jquery的顺序是否合适。谢谢

第一件事：如果您将脚本放在单独的 JS 文件中并链接到它，而不是将客户端脚本代码直接放入页面/视图中，Visual Studio 调试器也适用于 Javascript .

另外，如果可以的话，更新到 jQuery 1.11.1 并使用委托的on 事件而不是使用live。

【参考方案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 无法在同一视图中同时调试 Razor 和 Javascript，但如果脚本位于其自己的文件中，则可以。