Question

我正在为我的网页设计添加新的功能，而我在使用jQuery时遇到了一个荒谬的问题。

我有一个元素，我希望它在点击时附加。

我的代码是：

$("#add").click(function() {
    $("#list").append("<div id=\"item\"></div>");
});

它运行得很好。问题是这个新元素（div）仅在函数运行时显示（每次单击时，它都会出现并消失）。

我已经看到很多例子如何做到这一点，并且每个人都说这是正确的方法，但就我而言，它不是。

我如何解决这个愚蠢的问题？

Answer 1

我认为您所看到的是项目已添加，然后页面重新加载，您再也看不到该项目了。您可能需要阻止您点击的任何内容的默认操作：

$("#add").click(function(e) {
    e.preventDefault();
    $("#list").append("<div id=\"item\"></div>");
});

如果要多次点击这个，那么你不应该有重复的ID值，所以也许使用一个类名：

$("#add").click(function(e) {
    e.preventDefault();
    $("#list").append('<div class="item"></div>');
});

Answer 2

正如@Satpal建议的那样，您不能在HTML中使用重复的ID名称。相反，您可以为附加项使用类名。

$("#list").append("<div class=\"item\"></div>");