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

동적으로 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; 
}); 

와