Question

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

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

我的问题是：

第一个li是唯一删除的。如果单击“添加成分”，然后尝试删除该成分，则无效？
有没有办法让第一个li没有删除它，但所有后续的li都有一个删除链接？（仅仅因为应该总是至少有一种成分？）

Answer 1

当您致电clone()时，它不会重复事件。您需要致电clone(true)才能执行此操作，如the documentation中所述。

Answer 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(); });
}

Demo at jsfiddle.net

Answer 3

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

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

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

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

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

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

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

Answer 4

您正在添加动态添加到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/

正在删除<li>问题</li>

4 个答案: