有可能使一个jQuery附加标签切换复选框

Question

我有以下标记的列表：

<div class="container"> 
    <div class="element"> 
     <input type="checkbox" id="checkbox1" class="toggler"> 
     <label for="checkbox1">Toggle +</label> 
     <div class="more-info"> 
      <p>...</p> 
     </div> 
    </div> 
    <div class="element"> 
     ... 
    </div> 
</div> 

的purpuse是用纯CSS制作切换功能，所以我用这个隐藏/显示<div class="more-info">...</div>：

.more-info { 
    max-height: 0; 
    opacity: 0; 
    overflow: hidden; 
    transition: all .3s ease; 
} 

.toggler:checked ~ .more-info { 
    max-height: 200px; 
    opacity: 0; 
    overflow: hidden; 
} 

在容器中，我有一个按钮，将获得（在这种情况下，它是静态的）元素和追加到容器中。这是我遇到问题的地方，新元素中的标签不会切换复选框。如果我使复选框可见，并直接检查它的作品。

I have also made a codepen to illustrate my problem。

在此先感谢:)

Answer 1

您在代码中有两个问题。首先有一个$a()这应该只是$()。您还将附加复选框的类别设置为chekcbox而不是checkbox。试试这个：

$(document).ready(function() { 
 
    var i = 1; 
 
    $('#more').click(function(e) { 
 
    e.preventDefault(); 
 

 
    var element, checkbox, label, moreInfo, dummyText; 
 
    i++ 
 
    dummyText = $('<p />').text('Similique dis egestas aptent exercitationem sequi urna, nonummy laudantium, cillum pulvinar sociis assumenda? Minus nostra atque minima duis expedita ab irure sequi lectus natoque? Nihil. Similique dis egestas aptent exercitationem sequi urna, nonummy laudantium, cillum pulvinar sociis assumenda? Minus nostra atque minima duis expedita ab irure sequi lectus natoque? Nihil.'); 
 
    checkbox = $('<input />', { 
 
     id: 'checkbox' + i, 
 
     class: 'toggler', 
 
     type: 'checkbox' 
 
    }); 
 
    label = $('<label />', { 
 
     for: 'checkbox' + i, 
 
     text: 'Toggle +' 
 
    }); 
 
    moreInfo = $('<div />', { 
 
     class: 'more-info', 
 
     html: dummyText 
 
    }); 
 
    element = $('<div />', { 
 
     class: 'element' 
 
    }).append(checkbox, label, moreInfo); 
 

 
    $('.container').append(element); 
 
    }) 
 
});

body { 
 
    margin: 0; 
 
    font-family: sans-serif; 
 
    font-size: 18px; 
 
} 
 

 
.container { 
 
    display: block; 
 
    margin: 50px auto; 
 
    width: 500px; 
 
    padding: 30px; 
 
    background-color: #ededed; 
 
} 
 

 
label { 
 
    display: block; 
 
    margin-bottom: 5px; 
 
    font-size: 24px; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
} 
 

 
.toggler { 
 
    display: none; 
 
} 
 

 
.more-info { 
 
    margin-bottom: 20px; 
 
    padding-bottom: 20px; 
 
    width: 100%; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    opacity: 0; 
 
    border-bottom: solid 1px #ababab; 
 
    transition: all .3s ease; 
 
} 
 

 
.more-info>p { 
 
    margin: 0; 
 
} 
 

 
.toggler:checked~.more-info { 
 
    max-height: 200px; 
 
    opacity: 1; 
 
} 
 

 
#more { 
 
    display: block; 
 
    margin: 30px auto 0; 
 
    padding: 10px 0; 
 
    width: 120px; 
 
    text-align: center; 
 
    color: #3498db; 
 
    border: solid 2px #3498db; 
 
    border-radius: 22px; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="element"> 
 
    <input id="checkbox1" class="toggler" type="checkbox"> 
 
    <label for="checkbox1">Toggle +</label> 
 
    <div class="more-info"> 
 
     <p>Similique dis egestas aptent exercitationem sequi urna, nonummy laudantium, cillum pulvinar sociis assumenda? Minus nostra atque minima duis expedita ab irure sequi lectus natoque? Nihil. Similique dis egestas aptent exercitationem sequi urna, nonummy 
 
     laudantium, cillum pulvinar sociis assumenda? Minus nostra atque minima duis expedita ab irure sequi lectus natoque? Nihil.</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<a href="#" id="more">Get more</a>