Question

我已提及Steven Sanderson's blog并尝试在链接的点击事件上动态插入控件。现在在我的情况下，它不起作用。我不知道它有什么问题。删除Div（包括控件）工作正常。但附加控件不起作用。当我点击“添加更多”＆＃39;将它链接到新页面上。不渲染在同一页面上添加控件。

我的MainView代码：

<div id="Div1">
  <% Html.RenderAction("_EditServices", "CRM", new { id = Model.Id });%>
</div>
<div id="editorRows">
  <% Html.RenderAction("_EditInsertServices", "CRM"); %>
</div>
<%= Html.ActionLink("+ Add More Service(s)", "EditAdd", null , new { id = "addItem" })%>

我的_EditInsertServices的PartiaView：

<div class="editorRow">
<% using (Html.BeginCollectionItem("services"))
  { %>
  NOS:<%:Html.DropDownListFor(model=>model.Id,(SelectList)ViewData["crmServiceType"] as SelectList,"---")%>
  Comment:<%=Html.TextBoxFor(model => model.Comment, new { size = "20" })%>
  <a class="deleteInsertRow">delete</a>
  <% } %>
</div>

我的控制器代码：

public ActionResult EditAdd()
{
  ViewData["crmServiceType"] = new SelectList(CRMRequestDL.GetCRM_Service_TypeList().ToArray(), "Id", "ServiceName");
  return View("_EditInsertServices", new CommentedService());
}
public ActionResult _EditInsertServices()
{
  ViewData["crmServiceType"] = new SelectList(CRMRequestDL.GetCRM_Service_TypeList().ToArray(), "Id", "ServiceName");
  return PartialView();
}

脚本：

<script type="text/javascript">
    $("#addItem").click(function () {
        $.ajax({
            url: this.href,
            cache: false,
            success: function (html) { $("#editorRows").append(html); }
        });
        return false;
    });
    $("a.deleteInsertRow").live("click", function () {
        $(this).parents("div.editorRow:first").remove();
        return false;
    });
</script>

Answer 1

live（）已弃用，已在jQuery 1.9中删除

使用on

  $('#editorRows').on("click", "a.deleteInsertRow",function () {
    $(this).parents("div.editorRow:first").remove();
    return false;
});

如果您想read更多关于活动的信息

Answer 2

我解决了。实际上我把$（“＃addItem”）。click（function（）{}）;函数到$（document）.ready（function（）{}）;功能，它工作正常。所以每当我使用$（“任何类/ id”）时，我都应该将该方法放在 $（document）.ready（）函数中。

以下是解决方案：

<script type="text/javascript">
$(document).ready(function () {
  $("#addItem").click(function () {
    $.ajax({
    url: this.href,
    cache: false,
    success: function (html) { $("#editorRows").append(html); }});
    return false;
  });
});
</script>

Ajax请求不适用于动态控制追加

2 个答案: