TypeError: $(...).parent(...).delegate is not a function

Question

I am using WebGrid in my project. When I inspect my code(of aspx page) in browser, I found error on console. It is : TypeError: $(...).parent(...).delegate is not a function and when I click on error line it shows me following CODE:

$(function() {
$('table[data-swhgajax="true"],span[data-swhgajax="true"]').each(function() {
var self = $(this);
var containerId = '#' + self.data('swhgcontainer');
var callback = getFunction(self.data('swhgcallback'));
/*here comes the error*/
$(containerId).parent().delegate(containerId + ' a[data-swhglnk="true"]', 'click', function() {
$(containerId).swhgLoad($(this).attr('href'), containerId, callback);
return false;
});
})
});

Main ASPX page code:

<%using (Html.BeginForm("Action", "Dashboard", FormMethod.Post)) { %>
    <div id="MainDashboardDiv">
        <div class="UpperLiveTiles">
            <div id="RecentDiv">
                <a href="../CRM/RecentCRMRequest">
                            <h4 class="RequestTitle">Recent Requests</h4>
                        </a>
                        <%Html.RenderAction("RecentRequests", Model); %>
                    </div><!--End of RecentDiv -->
            <div id="PriorityDiv">
                        <a href="../CRM/HighPriorityCRMRequest">
                        <h4 class="RequestTitle">High Priority Requests</h4>
                        </a>
                        <%Html.RenderAction("PriorityRequests", Model); %>
                    </div><!--End of PriorityDiv -->
            </div><!--End of UpperLiveTiles -->
    </div><!--End of MainDashboardDiv -->
<%} %>

Partial View1 Code:

<%    
    var grid1var = new WebGrid(source: Model, defaultSort: "Id", fieldNamePrefix: "grid1", canSort: true, ajaxUpdateContainerId: "FirstDiv", canPage: true, rowsPerPage: 5);%>
<div id="FirstDiv">
    <%=
        grid1var.GetHtml(htmlAttributes: new { id = "grid1" }, tableStyle: "GridTable", headerStyle: "GridHeader",
        columns: grid1var.Columns(
                grid1var.Column(columnName: "Id", header: "ID", canSort: true),
                grid1var.Column(columnName: "Requester_Name", header: "Employee", canSort: true),
                grid1var.Column(columnName: "Estimated_Amount", header: "Amount", canSort: true),
                grid1var.Column(columnName: "Date_Created", header: "Date", canSort: true, format: item => item.Date_Created.ToString("dd-MM-yyyy"))
         ))
    %>
</div>

Partial View2 Code:

<%    
    var grid2var = new WebGrid(source: Model, defaultSort: "Id", fieldNamePrefix: "grid2", canSort: true, ajaxUpdateContainerId: "SecondDiv", canPage: true, rowsPerPage: 5);%>
<div id="SecondDiv">
    <%=
        grid2var.GetHtml(htmlAttributes: new { id = "grid2" }, tableStyle: "GridTable", headerStyle: "GridHeader",
        columns: grid2var.Columns(
                grid2var.Column(columnName: "Id", header: "ID", canSort: true),
                grid2var.Column(columnName: "Requester_Name", header: "Employee", canSort: true),
                grid2var.Column(columnName: "Estimated_Amount", header: "Amount", canSort: true),
                grid2var.Column(columnName: "Date_Created", header: "Date", canSort: true, format: item => item.Date_Created.ToString("dd-MM-yyyy"))
         ))
    %>
</div>

I don't know what type of error this is.

I finally catch the error:

It is just because of ready-made jquery menu I use in system is using old jquery. And it is conflicting with New Jquery version. I have removed that menu and everything is working fine.

May I know, Which jquery version you are using? – Anoop Sharma Feb 13 '13 at 06:00 — Anoop Sharma, Feb 13 '13 at 06:00
Can you debug the value of `$(containerId).parent()` ? – Ja͢ck Feb 13 '13 at 06:07 — Ja͢ck, Feb 13 '13 at 06:07

Jai · Answer 1 · 2013-02-13T06:02:00.960

2

use $(document) instead:

$(document).delegate(containerId + ' a[data-swhglnk="true"]', 'click', function() {
    $(containerId).swhgLoad($(this).attr('href'), containerId, callback);
    return false;
});

or you can place the id or class of the parent.

note:

.delegate() needs jQuery version 1.4.2 atleast

.live() needs jQuery version 1.3 atleast (deprecated: 1.7, removed: 1.9)

.on() needs jQuery version 1.7+

So if you are using jquery 1.9 then use .on().

edited Feb 13 '13 at 06:02

answered Feb 13 '13 at 05:48

Jai

74,255
12
74
103

This code is generating at run time. I am not writing it. I don't have any idea how to change it. – Dhwani Feb 13 '13 at 06:00
Okay but that would be nice if you post that code part too. – Jai Feb 13 '13 at 06:04
I have added it. You can view it now. – Dhwani Feb 13 '13 at 06:17

score 0 · Answer 2 · answered Feb 13 '13 at 06:18

0

If Your requirement is to bind event for that element on the fly Please refer $(document).delegate("your precise selector","event","function to call").

As I see you have said that this code is being generated on run time. Can you please give us code snippet of you aspx as well as generated code?

answered Feb 13 '13 at 06:18

Anoop Sharma

193
1
11

Sure, I have added it in my post. – Dhwani Feb 13 '13 at 06:22

TypeError: $(...).parent(...).delegate is not a function

2 Answers2

note: