Question

我有<li＆gt;使用jquery动态创建的列表。该列表具有输入字段和减号图标以删除列表项。以下是将新项目插入列表的示例代码：

$list = $("#servicesList");
$list.append(""<li data-value='" + uniqueIdentifier + "'>
(same line) <input type='text' class='input-mini' id='price' value='2500'>
(same line) <i id='icon-minus' class='icon-minus-sign'></i></li>

此列表项动态添加到div servicesList，这是一个ul项。

<ul id="servicesList">
</ul>

现在，当有人点击列表项的减号图标时，我需要删除该项。由于列表项是动态生成的，我使用document方法添加click事件监听器。这是不起作用的代码。

$(document).on('click','#icon-minus',function() {
    var $list =  $("#servicesList"),
    listValue = $(this).attr("data-value");
    $list.find('li[data-value="' + listValue + '"]').slideUp("fast", function() 
            {
              $(this).remove();
            });

以上代码无效。如果我将“#servicesList li”传递给on click函数，则代码可以工作，但即使单击文本输入字段，列表项也会被删除。我希望仅在单击减号图标时删除列表项。

Answer 1

我认为有两个问题：如果点击减号，$(this)引用<i>元素，而不是父<li>元素，那么你就没有得到正确的值在var listValue。

其次，我认为您不希望使用icon-minus的ID，而是使用类，因为页面上有多个图标缺失（id是唯一的）。

例如： http://jsfiddle.net/X9nFX/5/

Answer 2

我刚刚尝试了这段代码，这是有效的：http://jsfiddle.net/Vc3zg/

$("#servicesList").append('<li><input type="text" value="" /> <span id="icon-minus">X</span></li>');

$(document).on('click', '#icon-minus', function() {
   var $list = $("#servicesList"),
   listValue = $(this).attr("data-value");
   $list.find('li').slideUp("fast", function() {
       $(this).remove();
   });
});

Answer 3

ID应该始终是唯一的（这就是为什么它实际上被称为ID ...）...所以请确保你将所有你的ID输入到类和试试这个

$(document).on('click','#icon-minus',function() {
  var $list =  $("#servicesList"),

  $(this).parent().slideUp("fast", function() 
  {
      $(this).remove();
   });

Answer 4

我认为所有按钮都共享相同的ID
ID必须是每页唯一的。使用类代替按钮

并在$list.append(

中修改引号

Answer 5

第一个问题是，您添加的可能是多个元素，所有元素都具有相同的icon-minus id属性。在HTML页面中，每个元素的id属性必须是唯一的。我会转而使用该类：

$(document).on('click','.icon-minus-sign',function() {

下一个问题是事件处理程序函数内的this引用了<i>元素，所以这一行：

listValue = $(this).attr("data-value");

不起作用; this引用的元素不具有 data-value属性。您需要访问包含<li>元素的<i>：

$(this).closest('li').slideUp("fast", function() {
    $(this).remove();
});

删除列表末尾单击图标上动态创建的<li>列表项</li>

5 个答案: