Javascript 动态添加切换按钮添加后，单击一个按钮将影响另一个按钮

Hi am在单击按钮时动态添加切换按钮。但添加后，我点击了一个按钮，它是正常工作后，点击其他按钮，然后它将只影响第一个

请帮帮我

HTML代码：

<div id='test'>
    <button onclick="myFunction()">
        Add toggle button
    </button>
</div>

javaScript代码：

$('button').click(function() {
    var element = $('#test');
    var toggle_button = '<div id="switchdiv">\
        <input type="checkbox" id="switch1" name="switch1" class="switch" visible="false"/>\
        <label for="switch1">first switch</label>\
        </div>';
    element.append(toggle_button);
});

$（“按钮”）。单击（函数（）{
变量元素=$（“#测试”）；
变量切换按钮\
\
第一开关\
';
元素。追加（切换按钮）；
});

您已经为同一按钮编写了两次单击事件。一个在

onclick=“myFunction（）”

中，另一个是

$('button').click(function() {

});

---

所以，纠正这个问题。

问题是，您生成的输入具有相同的id，所以我所做的只是声明一个

id

变量，该变量将在每次单击时递增，然后我在

输入中使用它

和

标签

。我只更改了你的

javascript

，其他一切都是一样的

var id=0；
$（“按钮”）。单击（函数（）{
变量元素=$（“#测试”）；
变量切换按钮\
\
第一开关\
';
元素。追加（切换按钮）；
id++；
});
#switchdiv
{
明确：两者皆有；
保证金：1px；
}
输入。开关：空
{
左边距：-999px；
}
输入。开关：空~标签
{
位置：相对位置；
浮动：左；
线高：1.6em；
文本缩进：4em；
边际：0.2米0；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
输入.开关：空~标签：前，
输入。开关：空~标签：后
{
位置：绝对位置；
显示：块；
排名：0；
底部：0；
左：0；
内容：''；
宽度：3.6em；
背景色：#c33；
边界半径：0.3em；
盒影：嵌入0.2em 0 rgba（0,0,0,0.3）；
-webkit过渡：所有100毫秒的易用性；
过渡：所有100毫秒都容易进入；
}
输入。开关：空~标签：后
{
宽度：1.4em；
顶部：0.1米；
底部：0.1米；
左边距：0.1米；
背景色：#fff；
边界半径：0.15em；
盒影：嵌入0-0.2em 0 rgba（0,0,0,0.2）；
}
输入。开关：选中~标签：之前
{
背景色：#393；
}
输入。开关：选中~标签：后
{
左边距：2.1米；
}

添加切换按钮
这里的问题在于选择器，请添加以下代码并重试

var id = 0;
$('button').click(function() {
    var element = $('#test');    
    var toggle_button = '<div id="switchdiv">\
        <input type="checkbox" id="switch1'+id+'" name="switch1" class="switch" visible="false"/>\
        <label for="switch1'+id+'">first switch</label>\
        </div>';
    element.append(toggle_button);
    id++
});

var id=0；
$（“按钮”）。单击（函数（）{
变量元素=$（“#测试”）；
变量切换按钮\
\
第一开关\
';
元素。追加（切换按钮）；
身份证++
});
能否添加
myFunction（）
Hi tushar，$（'button'）的代码。单击（function（））这是用于单击事件，因为我们只有一个按钮，所以我直接这样添加了。@GVR请检查我的答案，我修复了您的问题issue@GVR不客气。如果您满意此答案，请不要忘记单击左侧的复选框；-）
var id = 0;
$('button').click(function() {
    var element = $('#test');    
    var toggle_button = '<div id="switchdiv">\
        <input type="checkbox" id="switch1'+id+'" name="switch1" class="switch" visible="false"/>\
        <label for="switch1'+id+'">first switch</label>\
        </div>';
    element.append(toggle_button);
    id++
});