我正在加载此处显示的部分内容:
<div id="Catering-Dialog" title="Catering for a new booking">
<div id="itemsTable">
@{Html.RenderAction("AddCateringItem", new { Model.Booking.BookingID });}
</div>
</div>
并拥有此jQuery .on()
$('a.editRow').on("click", function () {
alert("clicked");
});
基本上,partial是一个表格,每一行都有一个带有&#34;编辑&#34;在它中,当点击它时,它应该显示警告&#34;点击&#34;但什么都没发生。
有什么想法吗?
更新:
<div id="CateringTable">
<table border="2" bgcolor="#ffffff" id="cateringListTable">
<thead>
<tr>
<th>Time:</th>
<th>Description:</th>
<th>Quantity:</th>
<th>Cost £:</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
Html.RenderPartial("_CateringItemEditor", item);
}
</tbody>
</table>
</div>
这是渲染渲染的代码,每行都是渲染的部分代码,代码如下:
<tr>
<td>@Html.HiddenFor(model => model.StartTime)
<label class="cateringLabel">@Model.StartTime</label></td>
<td>@Html.HiddenFor(model => model.Description)
<label class="cateringLabel">@Html.DisplayFor(model => model.Description)</label>
</td>
<td>@Html.HiddenFor(model => model.Quantity)
<label class="cateringLabel">@Html.DisplayFor(model => model.Quantity)</label>
</td>
<td>@Html.HiddenFor(model => model.Charge)
<label class="cateringLabel">@Html.DisplayFor(model => model.Charge)</label>
</td>
<td>@Html.HiddenFor(model => model.CateringID)</td>
<td>
<a href="#" class="editRow">edit</a>
<a href="#" class="deleteRow">delete</a>
</td>
</tr>
答案 0 :(得分:1)
使用event delegation fr动态元素
$("#itemsTable").on("click","a.editRow" function () {
alert("clicked");
});
事件委托允许您将单个事件侦听器附加到父元素,该元素将为匹配选择器的所有子项触发,无论这些子项现在是存在还是将来添加。
答案 1 :(得分:0)
您需要将 event delegation 用于动态加载的元素:
事件委托允许我们将单个事件监听器附加到 父元素,将为匹配选择器的所有子项触发, 这些孩子现在是否存在,或将来是否存在。
$("#itemsTable").on("click", 'a.editRow',function () {
alert("clicked");
});