jQuery chắp thêm kiểu mất

Question

Tôi gặp sự cố khi cố gắng sử dụng hàm chắp thêm của jQuery, nó thêm phần tử vào div nhưng nó mất kiểu. Đây là một ví dụ here

Đây là html của tôi:

<form> 
<div class="checkbox"> 
    <label> 
     <input type="checkbox" data-toggle="toggle" checked="checked" /> 
     Toggle One 
    </label> 
</div> 
<div id="mainDiv"> 
</div> 
<div> 
    <button type="button" class="btn btn-default" id="btnAdd"> 
     Add 
    </button> 
</div> 

và đây là js:

$('#btnAdd').click(function(){ 
    $('#mainDiv').append(' <input type="checkbox" data-toggle="toggle"/>'); 
}) 

Phong cách của đầu vào của tôi là bootstrap-Toggle.

Bạn có thể giúp tôi không? Cảm ơn

Answer 1

Bạn phải khởi động lại chuyển đổi, vì khởi tạo xảy ra khi tải tài liệu. Không phải trên bay.

JsFiddle

$('#btnAdd').click(function(){ 
    var el = $(' <input type="checkbox" data-toggle="toggle"/>'); 
    $('#mainDiv').append(el); 
    el.bootstrapToggle(); 

}) 

mô tả:

1. tạo hộp kiểm trong el
2. gắn el đến #mainDiv
3. reinitialize tất cả js/css mà làm cho nó khá với el.bootstrapToggle()

Answer 2

Ở đây bạn đi với thêm một giải pháp https://jsfiddle.net/a3nq8aky/4/

$('#btnAdd').click(function(){ 
 
    $('#mainDiv') 
 
    .append(' <input type="checkbox" data-toggle="toggle"/>') 
 
    .find('input[type="checkbox"]') 
 
    .last() 
 
    .bootstrapToggle(); 
 
})

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> 
 
<form> 
 
    <div class="checkbox"> 
 
    <label> 
 
     <input type="checkbox" data-toggle="toggle" checked="checked" /> 
 
     Toggle One 
 
    </label> 
 
    </div> 
 
    <div id="mainDiv"></div> 
 
    <div> 
 
    <button type="button" class="btn btn-default" id="btnAdd"> 
 
     Add 
 
    </button> 
 
    </div> 
 
</form>

Khi bạn gắn checkbox đến mainDiv, tìm mới nhất các yếu tố bổ sung sử dụng jQuery last phương pháp sau đó reinitialise để bootstrap toggle.

Hy vọng điều này sẽ giúp bạn.