$（this）.parent（「tr」）。remove（）; doe不會從視圖中刪除表格

這是我之前提出的一個問題， 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>

我用這個查詢刪除網格中的一行，點擊Remove按鈕;

$('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（）;不會修改我的視圖並刪除表格。我該如何解決這個問題？

來源

2013-05-21 arame3333

$（本）中完成的（）最有可能不涉及任何DOM元素。 – foxx

我想這是你想要什麼：

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

parent只有移動漲1平。由於.removeItem在表單內，因此您需要closest。

而且就像foxx說的那樣，在完成回調中使用this，你不會瞄準dom元素。所以你必須把它作爲一個局部變量（var removeItemEl = $(this);）。

來源

2013-05-21 15:07:50 sroes

這是正確的答案。當時間限制允許我時，我會打勾你。你會使用委託還是你會使用？你會用身體作爲選擇器嗎？我發現只有身體似乎工作。 – arame3333

$(this)您done()功能沒有提到原DOM元素裏面了..

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

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

});

如果還是不行的話tr不是.removeItems的父母，只是做了一些控制檯.logging以查看element.parent("tr")是否與要刪除的元素相匹配。

你可能要檢查這個問題，以及Difference between jQuery parent(), parents() and closest() functions

來源

2013-05-21 15:07:22 foxx

試試這個：

$('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-21 15:10:53

$（this）.parent（「tr」）。remove（）; doe不會從視圖中刪除表格

回答

相關問題