I'm facing an issue with a simple mvc table in my cshtml page. I am attempting to add a checkbox in one of the columns, but when I click on the checkbox, I receive the following error:
Uncaught TypeError: Cannot read property 'click' of undefined
This error seems to be originating from the bootstrap.js file:
b.prototype.click = function(b) {
var c = a(b.currentTarget).closest("tr").find(this.options.target)[0];
if (a(b.target)[0] !== c)
if (b.preventDefault(),
c.click)
c.click();
else if (document.createEvent) {
var d = document.createEvent("MouseEvents");
d.initMouseEvent("click", !0, !0, window, 0, 0, 0, 0, 0, !1, !1, !1, !1, 0, null),
c.dispatchEvent(d)
}
}
The error is triggered because the value of "c" is undefined. Oddly enough, commenting out the bootstrap.js file from the layout page resolves the issue.
Below is the code snippet for my table:
<table id="DashboardTab" class="table table-striped rowlink table-hover" data-link="row">
<tr>
<th>
Name
</th>
<th>
Groups
</th>
<th>Active</th>
<th></th>
</tr>
@{var i = 0;}
@foreach (var item in Model)
{
<tr>
<td style="display: none">@item.Id</td>
<td>
@Html.ActionLink(item.Name, "Edit", new { id = item.ID })
</td>
<td>
<i>All</i>
</td>
<td>
@if (item.IsStd)
{
@Html.CheckBox("Active" + i, item.IsActive.Value)
}
</td>
<td style="display: none">@item.IsStandard</td>
<td>
<i class="fa fa-arrows-v" aria-hidden="true"></i>
</td>
</tr>
i++;
}
</table>
Any insights on what might be causing this error?
Update: The issue appears to be related to the attribute "data-link="row". This attribute makes the entire row clickable, hence clicking on the checkbox triggers a row click event. How can I make only specific rows clickable and not all?