1

这是我上一个问题的后续问题；MVC：按钮未触发表格单元中的单击事件

因为我正在动态创建网格，所以我必须使用 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;
});

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

4

3 回答 3

1

I think this is what you want:

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

parent only travels up 1 level. And since .removeItem is within the form, you need closest.

And like foxx was saying, by using this inside the done callback, you're not targetting the dom element. So you have to assign it as a local variable (var removeItemEl = $(this);).

于 2013-05-21T15:07:50.240 回答
0

$(this) inside your done() function didn't refer to the original dom element anymore..

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

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

});

If it still doesn't work, then tr is not the parent of .removeItems, just do some console.logging to see if the element.parent("tr") is matching the element you want to remove.

You might want to check this as well Difference between jQuery parent(), parents() and closest() functions

于 2013-05-21T15:07:22.740 回答
0

试试这个：

$('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;
});
于 2013-05-21T15:10:53.720 回答