0

我正在构建一个食谱保存应用程序，其中有一个类似于http://jsfiddle.net/LHPbh/的表单。

如您所见，我有一组表单元素包含在一个<li>. 您可以单击添加成分并将更多的 li 添加到该字段中。

我的问题是：

  1. 第一个 li 是唯一删除的。如果您单击添加成分，然后尝试删除该成分，则没有任何效果？
  2. 有没有办法不让第一个 li 被它删除，但所有后续 li 的旁边都有一个删除链接？（仅仅因为应该总是至少有一种成分？）
4

4 回答 4

4

当您调用时clone()，它不会复制事件。如文档中所述，您需要调用clone(true)它才能执行此操作。

于 2013-03-10T17:17:57.350 回答
2

您没有在克隆的元素上放置事件侦听器。此外，您不应为“删除”链接提供自己的 id，因为它们必须是唯一的。

要使第一个成分没有删除按钮，请不要在标记中包含一个，而只是动态创建它们并将它们附加到克隆的元素中：

var deleteButton = $("<a class='float-left'>Delete</a>").click(deleteThis);
$('ul#listadd > li:first')
  .clone()
  .attr('name', 'ingredient' + newNum)
  .append(deleteButton)
  .appendTo('ul#listadd');

function deleteThis() {
    var li = $(this).closest('li')
    li.fadeOut('slow', function() { li.remove(); });
}

jsfiddle.net 上的演示

于 2013-03-10T17:19:25.230 回答
0

http://jsfiddle.net/LHPbh/2/

$('.deleteThis').live("click", function () {
        var li = $(this).closest('li')
        li.fadeOut('slow', function() { li.remove(); });
    });

这是对 1. 点的回答。问题是，事件处理程序绑定没有发生在新创建的元素中，因为此代码仅在页面加载时运行。这可以通过使用 .live() 来解决。另一个问题是，id-s 必须是唯一的。所以代替 id，在这里你可以使用类 .deleteThis。

http://jsfiddle.net/LHPbh/19/

这增加了对 2. 点的回答：

if ($("#listadd li").length == 1) {
    return;
}

如果列表仅包含 1 个 li 元素，则回调的其余部分将不会运行。

于 2013-03-10T17:20:42.980 回答
0

您正在添加动态添加到 DOM 的项目，因此 jQuery 无法访问它们:) 在这种情况下，您可以使用以下代码：

$(document).on('click', '.selector', function(e) {

    //code here

});

其次，您正在加载一个相当旧版本的 jQuery。

第三，您试图选择一个 ID 已经存在的元素，并且 ID 只能存在一次。我已将其更改为更新示例中的类。

最后，您定义了两次链接的类，如下所示：

<a class='float-left' id="deletethis" href='#' class="deletethis">Delete</a>

这也带来了问题，所以我将其更改为更正标记，如下所示：

<a class='float-left deletethis' href='#'>Delete</a>

祝你好运:) 我在这里更新了你的 jsFiddle：

http://jsfiddle.net/q4pf6/

于 2013-03-10T17:32:25.743 回答