3

如果我有一组表格列表项：

<div id="target">
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
    </ul>
</div>

我想构造一个点击函数来添加一个'li'并增加每个项目的内部html，我可以写：

var listItems = $('#target ul li');
var newItem = document.createElement('li');
newItem.innerHTML = "list item " + (parseInt(listItems.size()) + 1);

$("#target").click(function() {
    var list = $('#target ul');
    list.append(newItem);
});

这有效，但只有一次。为什么每次单击它时它都不会添加一个列表项？

4

5 回答 5

1

简单的修复......你应该在事件监听器中创建你的元素：

var list = $('#target ul');

$("#target").click(function() {
    var newItem = document.createElement('li');
    newItem.innerHTML = "list item " + (list.find("li").length + 1);
    list.append(newItem);
});

注意：我已将 替换.size()为.length。它更快并且做完全相同的事情:)

于 2013-07-18T17:59:29.407 回答
1

您必须在每次单击时创建 newItem：

var $list = $('#target ul');
$('#target ul').click(function() {
    var newItem = document.createElement('li');
    newItem.innerHTML = "list item " + ($list.children().length + 1);
    $list.append(newItem);
});

jsFiddle

您还可以创建一个项目作为模板并重复使用它，这可能是您想要的吗？

var $cloneItem = $('<li />');
var $list = $('#target ul');
$("#target").click(function () {
    $list.append($cloneItem.clone().html('list item ' + ($list.children().length + 1)));
});

jsFiddle

于 2013-07-18T17:59:41.927 回答
0

你可以做：

$("#target").click(function() {
    $(this).find('ul')
        .append($('<li/>')
        .text('list item '+$(this).find('ul li').length+1));
});
于 2013-07-18T18:01:40.980 回答
0

您只是重新附加（删除然后再次附加）相同的 LI 对象。您必须在 click 函数中创建一个新的 LI。

于 2013-07-18T18:00:16.493 回答
0

这里真正的问题是，为什么每次点击都创建一个新的？

如果你登录newItem之前list.append你会看到它存在。
演示

为什么不简单地改变它的文本然后追加，就像下面的代码？

var $list = $('#target ul'),
    $listItems = $list.find('li'),
    newItem = document.createElement('li');

$("#target").click(function() {
    newItem.innerHTML = "list item " + (parseInt($listItems.size()) + 1);
    $list.append(newItem);
});

上面的代码将不起作用，问题是newItem.innerHTML它将始终引用首先附加的相同元素。您可以在此处查看此行为。

这就是为什么您必须在每次点击时创建一个新元素。

于 2013-07-18T18:25:15.503 回答