Question

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

请帮助我！

HTML code：

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

CSS代码：

 #switchdiv
{
clear: both;
margin:1px;
}

input.switch:empty
{
margin-left: -999px;
}

input.switch:empty ~ label
 {
position: relative;
float: left;
line-height: 1.6em;
text-indent: 4em;
margin: 0.2em 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
 }

input.switch:empty ~ label:before, 
input.switch:empty ~ label:after
{
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: ' ';
width: 3.6em;
background-color: #c33;
border-radius: 0.3em;
box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
-webkit-transition: all 100ms ease-in;
     transition: all 100ms ease-in;
 }

input.switch:empty ~ label:after
{
width: 1.4em;
top: 0.1em;
bottom: 0.1em;
margin-left: 0.1em;
background-color: #fff;
border-radius: 0.15em;
box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}

 input.switch:checked ~ label:before
{
background-color: #393;
 }

input.switch:checked ~ label:after
{
margin-left: 2.1em;
}

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);
});

Answer 1

您已为同一按钮编写了两次点击事件。一个在onclick="myFunction()"，另一个在

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

});

所以，更正。

Answer 2

问题是，您生成的输入具有相同的ID，所以我所做的就是声明一个id变量，该变量将在每次点击时递增，然后我在input和{{{{}}中使用它1}}。我只改变了你的label，其他一切仍然是一样的。

＆＃13;

javascript

＆＃13;

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

＆＃13;

 #switchdiv
{
clear: both;
margin:1px;
}

input.switch:empty
{
margin-left: -999px;
}

input.switch:empty ~ label
 {
position: relative;
float: left;
line-height: 1.6em;
text-indent: 4em;
margin: 0.2em 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
 }

input.switch:empty ~ label:before, 
input.switch:empty ~ label:after
{
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: ' ';
width: 3.6em;
background-color: #c33;
border-radius: 0.3em;
box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
-webkit-transition: all 100ms ease-in;
     transition: all 100ms ease-in;
 }

input.switch:empty ~ label:after
{
width: 1.4em;
top: 0.1em;
bottom: 0.1em;
margin-left: 0.1em;
background-color: #fff;
border-radius: 0.15em;
box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}

 input.switch:checked ~ label:before
{
background-color: #393;
 }

input.switch:checked ~ label:after
{
margin-left: 2.1em;
}

＆＃13;

Answer 3

问题在于ID选择器，添加以下代码并尝试。

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++
});

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

3 个答案: