刷新局部视图答案

【问题标题】：Refresh Partial view刷新局部视图
【发布时间】：2014-08-20 16:04:43
【问题描述】：

我使用@Html.RenderAction("_DisplayImages") 渲染局部视图。

@model List<Univems4.Models.ImageViewModel>

@foreach (var image in Model)
{
<div class="set">

    <div class="header invisible">
        <label class="edit">@image.Name</label>
        <button class="close btnDeleteImage" title="Delete">×</button>
    </div>

    <img class="img-thumbnail edit" src="data:image/bmp;base64,@image.base64string" id="@image.Id" />

</div>
}

点击按钮后，我想刷新这个局部视图。我尝试的方法是使用 jQuery ajax get 方法。

 $.get("/VmsMessage/_DisplayImages", null, function (data) {
                //success

                $('#bit').html(data);

            }, "html");

部分视图已刷新。但它不再响应事件。为什么？

$(".set").hover(function (e) {
  // do something
});

$(".edit").click(function (e) {
  // do something
});

【问题讨论】：

很可能您的所有 Javascript 事件都绑定在页面加载时，因此重新加载该内容不会再次发生。

标签： model-view-controller partial-views

【解决方案1】：

由于 html 将动态生成，因此事件不会在 DOM 加载时绑定，您需要执行 event delegation:

$(document).on("mouseover",".set",function (e) {
  // do something
});

$(document).on("click",".edit",function (e) {
  // do something
});

【讨论】：