数据正在div中重复

Question

请在此处查看jsfiddle http://jsfiddle.net/NLe3s/

如果仅点击一个水平制表符，则其表现正常。

但如果我点击多个水平制表符，数据将在div中重复。

请看这里的图片

请告诉我如何消除那个？

单击水平制表符时，我会以这种方式将数据附加到div。

$("#tab-dock").append('<div id="daccordion" />');

$("#daccordion").append('<h3><a href="#">Info</a></h3>')
    .append('<div id="dinfo"></div>')
    .append('<h3><a href="#">Market</a></h3>')
    .append('<div id="dmarket"></div>');

$("#daccordion").accordion({
    activate: function (event, ui) {

        setStuff(event, ui);
    },
    heightStyle: "content",
    autoHeight: false,
    collapsible: true,
    clearStyle: true,
    active: false,
});

Answer 1

jsFiddle

添加

$('#daccordion').remove();

在之前

$("#tab-dock").append('<div id="daccordion" />');

或另一种方式可能是

$("#tab-dock").html('<div id="daccordion" />');

只需编写，您无需添加更多代码行。

你可以做一个更好的检查，以避免重复的div具有相同的id（当然，这是错误的）

Answer 2

在添加像这样的新html之前删除div中的html：

$("#tab-dock").html("");

然后：

$("#tab-dock").append('<div id="daccordion" />');

$("#daccordion").append('<h3><a href="#">Info</a></h3>')
    .append('<div id="dinfo"></div>')
    .append('<h3><a href="#">Market</a></h3>')
    .append('<div id="dmarket"></div>');

UPDATED FIDDLE