Question

这是我之前提出的一个问题; MVC: Button not firing click event in a tablecell

因为我正在动态创建网格，所以我必须使用jquery委托才能将事件附加到网格中的按钮。

所以我在这个视图中有这个部分;

   <section id="rightSide" class="shrinkwrap" style="float: right;margin-top:10px;width:500px;">
        <fieldset>
            <legend>Select Other Materials</legend>
            <form method="get" action="@Url.Action("CreateOtherMaterials", "DataService")"
                  data-scd-ajax="true" data-scd-target="#otherMaterialList">
                <p>Select a Material: <input type="search" name="searchOtherMaterial" id="searchOtherMaterial" data-scd-autocomplete="@Url.Action("AutocompleteOtherMaterial", "DataService")" style = "width: 300px;" class="submitOtherMaterialSelectionNew" data-scd-add-other-material="@Url.Action("AddOtherMaterialNew", "DataService")"/>
                    @Html.DialogFormButton("Add New Material", Url.Action("AddMaterial", "Popup"), "Add New Material", null, Url.Action("Create"))
                </p>
            </form>  

            @Html.Partial("_OtherMaterials", Model.SupplierMaterialList.Where(x => x.PrimaryMaterialFlag == false).ToList())

        </fieldset>
    </section>

部分视图_OtherMaterials看起来像

@model IList<SupplierMaterial>

<div id="otherMaterialList" >
    <p>These materials have now been added for this supplier</p>
    <table id="tableOtherSupplierList">
        @Html.DisplayForModel()
    </table>
</div>

我的显示模板;

@model SupplierMaterial
<tr>
    <td>@Model.Material.MaterialName </td>
    <td>
        <form class="shrinkwrap" method="get" action="@Url.Action("RemoveOtherMaterial", "DataService", new { id = Model.MaterialId })">
            <input type="button" id="btnRemove" value="Remove" class="removeItem"/>
        </form>
    </td>
</tr>

我使用此查询在单击“删除”按钮时删除网格中的一行;

 $('body').delegate('.removeItem', 'click', function () {
    var $form = $(this).closest("form");
    var options = {
        url: $form.attr("action"),
        type: $form.attr("method")
    };

    $.ajax(options).done(function (data) {
        $(this).parent("tr").remove();
    });

    return false;
});

我尝试用更接近的东西替换body元素，例如#tableOtherSupplierList，但这不起作用。我想使用on（）而不是委托，但到目前为止只有上面的代码似乎工作。然而，我的主要问题是行$（this）.parent（“tr”）。remove（）;不会修改我的视图并删除tablerow。我该如何解决这个问题？

Answer 1

我认为这就是你想要的：

var removeItemEl = $(this);
$.ajax(options).done(function (data) {
    removeItemEl.closest("tr").remove();
});

parent仅上升1级。由于.removeItem在表单中，因此您需要closest。

就像foxx说的那样，通过在完成回调中使用this，你并没有瞄准dom元素。因此，您必须将其指定为局部变量（var removeItemEl = $(this);）。

Answer 2

$(this)函数中的

done()不再引用原始的dom元素..

$('body').delegate('.removeItem', 'click', function () {
    var element = $(this);

    $.ajax(options).done(function (data) {
        element.parent("tr").remove();
    });

});

如果它仍然不起作用，则tr不是.removeItems的父项，只需执行一些console.logging以查看element.parent("tr")是否与要删除的元素匹配。

您可能也想检查Difference between jQuery parent(), parents() and closest() functions

Answer 3

请改为尝试：

$('body').delegate('.removeItem', 'click', function () {
    var $form = $(this).closest("form");
    var $elem = $(this);
    var options = {
        url: $form.attr("action"),
        type: $form.attr("method")
    };

    $.ajax(options).done(function (data) {
        $elem.closest("tr").remove();
    });

    return false;
});

$（本）.parent（ “TR”）删除（）。不要从视图中删除tablerow

3 个答案: