如何删除使用jquery运行时创建的文本框

Question

我创建链接按钮，如果点击它，它会自动添加带有删除链接的文本框。问题出在文本框和删除链接被添加后，当单击删除链接时，它不能删除文本框。如何解决这个问题？

查看

@using (Html.BeginForm()) 
{ 
    <div id="editorRows"> 
     @foreach (var item in Model) 
     { 
      Html.RenderPartial("GiftEditorRow", item); 
     } 
    </div> 
    @Html.ActionLink("Add another...", "BlankEditorRow", null, new { id = "addItem" }) 
    <input type="submit" value="Finished" /> 
} 

@section Scripts { 
    <script> 
     $(document).ready(function() { 
      $("#addItem").click(function() { 
       $.ajax({ 
        url: this.href, 
        cache: false, 
        success: function (html) { 
         $("#editorRows").append(html); 
        } 
       }); 
       return false; 
      }); 

      $("a.deleteRow").on("click", function() { 
       $(this).parents("div.editorRow:first").remove(); 
       return false; 
      }); 
     }); 
    </script> 
} 

部分用于动态添加文本框查看：

@model MvcApplication1.Models.Gift 
@using MvcApplication1.Helpers 

<div class="editorRow"> 
    @using (Html.BeginCollectionItem("gifts")) 
    { 
     <p> 
      Item: @Html.TextBoxFor(x => x.Name) 
      Value: @Html.TextBoxFor(x => x.Price, new { size = 4 }) 
      <a href="#" class="deleteRow">delete</a> 
     </p> 
    } 
</div> 

Answer 1

由于您使用jquery动态生成HTML您必须使用事件代表团。

而不是

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

尝试

$(document).on("click", "a.deleteRow" ,function() { 
    $(this).parents("div.editorRow:first").remove(); 
    return false; 
}); 

更多Here.

Answer 2

更换

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

与

$(document).on("click","a.deleteRow", function() { 
$(this).parents("div.editorRow:first").remove(); 
return false; 
});