刪除以編程方式添加的LI來自UL

我正在使用asp.net MVC 3，並試圖刪除通過HTTP Post添加的LI。刪除以編程方式添加的LI來自UL

我能夠刪除已經在用戶界面中的項目，但沒有添加新項目。

這裏是UI代碼：

<a href="#" id="addNew">Add New</a> 
<div id="ulList"> 
    <ul> 
     <li id="li_1"><a href="#" id="a_1" class="aLink">1</a></li> 
     <li id="li_2"><a href="#" id="a_2" class="aLink">2</a></li> 
     <li id="li_3"><a href="#" id="a_3" class="aLink">3</a></li> 
    </ul> 
</div> 
<script type="text/javascript"> 

    $('#addNew').on("click", function() { 
     $.ajax({ 
      url: '@Url.Action("AddItem")', 
      type: "POST", 
      data: { id: 4 }, 
      success: function (data) { 
       $('#ulList ul').append(data); 
      } 
     }); 
    }); 

    $('.aLink').on("click", function() { 
     RemoveItem($(this).attr('id')); 
    }); 

    function RemoveItem(id) { 
     id = id.substring(id.indexOf("_") + 1); 
     $.ajax({ 
      url: '@Url.Action("RemoveItem")', 
      type: "POST", 
      data: { id: id }, 
      success: function (event, ui) { 
       $('#li_' + id).remove(); 
      } 
     }); 

    } 
</script>

的調用的AddItem德的AddItem在後面的代碼，並返回簡單的字符串。

[HttpPost] 
     public ActionResult AddItem(int id) 
     { 
      return Content(@"<li id=""li_4""><a href=""#"" id=""a_4"" class=""aLink"">4</a></li>"); 
     }

物品上沒有得到補充，但是請注意，當你點擊新添加的項目「4」，它不會刪除或呼叫作出了刪除的項目。請建議我需要做什麼才能使其發揮作用。

來源

2012-04-23 jmogera

$('.aLink').on("click", function() { 
    RemoveItem($(this).attr('id')); 
});

你的jQuery的事件處理程序只會將事件附加到頁面上最初使用.on的元素。爲了使您的事件可以在動態添加的元素上工作，您有兩個選項，具體取決於您運行的jQuery的版本。

V1.4 - > 1.7 .delegate（）

$('#ulList').delegate("click","a" function() { 
    RemoveItem($(this).attr('id')); 
});

V1.7 +修正。對（） - >重新定位，以指向父容器

$('#ulList').on("click","a", function() { 
    RemoveItem($(this).attr('id')); 
});

來源

2012-04-23 15:45:06

你應該編輯你的答案關於v1.4 - > 1.7 .live（），作爲http://api.jquery.com/live/ states：從jQuery 1.7開始，.live（）方法已被棄用。使用.on（）附加事件處理程序。老版本的jQuery用戶應該優先使用.delegate（），而不是.live（）。'當你更新到'.delegate（）'時，我會+1。 – 2012-04-23 15:52:48

@Scott修改。將不得不研究.live（）和.delegate（）之間的差異。在1.7中棄用它，然後說1.7以前的任何人不應該使用live（）是一個稍微令人困惑的陳述。 – 2012-04-23 16:00:18

強烈建議使用jQuery 1.7+和on()：

$("#ulList").on("click", ".aLink", function() { 
    RemoveItem($(this).attr("id")); 
});

，或者如果您使用的是版本低於jQuery的1.7，使用delegate()：

$("#ulList").delegate(".aLink", "click", function() { 
    RemoveItem($(this).attr("id")); 
});

來源

2012-04-23 15:29:35 thecodeparadox

或可替代地，可以使用代表。 – 2012-04-23 15:30:47

或者如果您使用jQuery 1.7.x，或者委託生存，您應該使用['.on（）']（http://api.jquery.com/on/）。 – 2012-04-23 15:33:16

刪除以編程方式添加的LI來自UL

回答

相關問題