附加 div 不起作用答案

【问题标题】：append div doesn't work附加 div 不起作用
【发布时间】：2013-09-29 14:38:54
【问题描述】：

我有一个大问题。我正在尝试追加一个新的 div，但它不起作用。

我的功能是：

jQuery(function($){
    var $meter = $('#analog_meter'), count = 1;
    $('#addanalog').click(function(e){
        e.preventDefault();
        if(count > 2){
            alert("That's enough already!");
            return;
        }
        count ++;

        ($meter.parent()).append($meter.clone());
    });
});

我绘制模拟仪表的代码示例是：

<div id="add" style="visibility:hidden;" style="display:inline-block;"><a id="addanalog" href="#" Onclick="add_new_analog();">ADD NEW ANALOG</a></div>

<div id="plot_analog">
    <div id="analog_meter" name="analog_meter">
        <!-- less information --> 
        <div id="content-two" style="visibility:hidden;">
                <div id="chart1"  class="jqplot-target"></div>
                <a id="div-one" href="#" Onclick="mostra1();"><? echo LABEL_MORE_INFORMATION ?></a>&nbsp;&nbsp;  &nbsp;&nbsp;
                <a id="div-two" href="#" Onclick="mostra2();"><? echo LABEL_LESS_INFORMATION ?></a>
        </div>
        <!-- more information -->
        <div id="content-one" style="visibility:hidden;">
            <div id="chart2"  class="jqplot-target"></div>
            <a id="div-one" href="#" Onclick="mostra1();"><? echo LABEL_MORE_INFORMATION ?></a>&nbsp;&nbsp;  &nbsp;&nbsp;
            <a id="div-two" href="#" Onclick="mostra2();"><? echo LABEL_LESS_INFORMATION ?></a>
        </div>
</div>

</div>

发生的情况是，每次我单击添加新模拟时，都会绘制两个模拟仪表。像这样：

我想要的是当点击添加时，只绘制一个模拟表。

【问题讨论】：

这不是 the 问题，但这是 a 问题：您正在做的事情创建了一个无效的 DOM：您正在克隆一个元素有一个id（并且它的子元素也有ids），但在将克隆附加到文档之前不更改id 值。 id 值必须在页面上是唯一的。
我该如何解决这个问题？
@user: ...更改ids？根本没有ids？
如何更改 div 的 ID，只要我添加新的 div？请帮帮我
@user：我建议你从当前的任务中退后一步，学习一些 DOM/jQuery 教程。要从克隆的元素中删除ids：var $clone = $meter.clone(); $clone.find("*").addBack().removeAttr("id");，然后在追加时使用$clone。

标签： jquery html append clone

【解决方案1】：

您向<a id="addanalog" href="#" Onclick="add_new_analog();">ADD NEW ANALOG</a>添加了两个点击处理程序

首先在onclick 标记中添加处理程序，然后在 JavaScript 文件的“codebehind”中添加第二个处理程序：

$('#addanalog').click(function(e){   // register second click handler
     e.preventDefault();
     if(count > 2){
        alert("That's enough already!");
        return;
     }
     count ++;

     ($meter.parent()).append($meter.clone());
 });

我认为最简单的方法是删除其中一个。

【讨论】：

怎么样？我两个都需要。其中之一，绘制我的模拟仪表。另一个，添加更多的div...
好吧，也许我不明白。但是add_new_analog(); 做了什么。您尚未发布此函数/构造函数/事件的代码
函数 add_new_analog() { plotmychart(xmlhttp.responseText);
剥离了你的例子，并将它添加到jsFiddle 以供我使用。问题出在哪里？

【解决方案2】：

您可以尝试删除

Onclick="add_new_analog();"

当你通过 jQuery 连接点击事件时。如果 add_new_analog() 添加了一个类比，而您的 jQuery 函数添加了一个类比，那么您最终会添加 2。

编辑：@T.J. Crowder 对 id 有很好的看法。您应该确保它们在克隆时保持唯一。

【讨论】：