删除以编程方式添加的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

回答

相关问题