1

我有一个<li使用 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).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”传递给单击功能，则代码有效，但即使单击文本输入字段，列表项也会被删除。我希望仅在单击减号图标时删除列表项。

4

5 回答 5

2

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

其次，我认为您不想使用 idicon-minus而是使用类，因为页面上有多个图标减号（id 是唯一的）。

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

于 2013-01-04T12:15:48.350 回答
1

我刚刚尝试了这段代码，它正在工作：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();
   });
});
于 2013-01-04T12:14:11.747 回答
0

ID 应该始终是唯一的（这就是它被称为 ID 的原因）。因此，请确保将所有 ID 更改为 class 并尝试以下操作：

$(document).on('click','#icon-minus',function() {
  var $list =  $("#servicesList"),
  
  $(this).parent().slideUp("fast", function() 
  {
      $(this).remove();
   });
于 2013-01-04T12:07:08.340 回答
0

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

并在您的内部修复您的报价$list.append(

于 2013-01-04T12:07:18.297 回答
0

第一个问题是您可能添加了多个元素，所有元素都具有相同的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();
});
于 2013-01-04T12:09:11.170 回答