有可能使一個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>