加载部分时jQuery绑定

时间:2014-04-22 10:22:15

标签: jquery

我正在加载此处显示的部分内容:

<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>

2 个答案:

答案 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");
});