Блог

Недавно я начал работать над проектом. В этом проекте мне нужно реализовать функциональность добавления клонированного div. Внутри этого div я инициализировал плагины jquery с несколькими вариантами выбора select2. Но после добавления только что клонированного div select2 не работает внутри только что клонированного div, а также не в предыдущем div. Вот код html-страницы:

 <div class="popup__room_info">
        <div class="popup__room_flex">
                <div class="popup__person_dev">
                    <div style="width: 100%; display: flex" class="removeButtonDiv">
                        <h3>Room <span class="number">1</span></h3>
                    </div>
                    <div style="display: flex">
                        <div class="popup__adults">
                            <span class="pb-1">Adults</span>
                            <div class="quantity buttons_added">
                                <input type="button" value="-" class="minus">
                                <input type="number" step="1" min="1" max="" name="quantity" 
                                 value="1" title="Qty" class="input-text qty text" 
                                 size="4" pattern="" inputmode="">
                                <input type="button" value=" " class="plus">
                            </div>
                        </div>
                        <div class="popup__children">
                            <span class="pb-1">Children</span>
                            <button class="btn bg-white text-black">Add a Child</button>
                            <select class="form-control childSelect" multiple>
                                <option value="0 Years">0 Years</option>
                                <option value="1 Years">1 Years</option>
                                <option value="2 Years">2 Years</option>
                                <option value="3 Years">3 Years</option>
                                <option value="4 Years">4 Years</option>
                                <option value="5 Years">5 Years</option>
                                <option value="6 Years">6 Years</option>
                                <option value="7 Years">7 Years</option>
                                <option value="8 Years">8 Years</option>
                                <option value="9 Years">9 Years</option>
                            </select>
                        </div>
                    </div>
                </div>

            <div class="clonned__div"></div>
            <div class="popup__bottom_div">
                <button class="add_room btn btn-success text-black" id="addRoomButton">
                 <i class="fa fa-plus"></i> Add a room</button>
                <button class="btn btn-warning text-black">Done</button>
            </div>
        </div>
    </div>
 

А вот код js:

 $("#addRoomButton").on("click", function() {
    // Clone the template and toggle some classes
    let newDiv = $(".popup__person_dev")
        .clone()
        .toggleClass("popup__person_dev new__div_person");
    $(".popup__person_dev").css(
        "border-bottom", "1px solid #f2f2f2",
        "margin-bottom", "5px"
    );
    $(".new__div_person").css(
        "border-bottom", "1px solid #f2f2f2",
        "margin-bottom", "5px",
        "margin-top", "5px"
    );
    // Append
    let firstCountDiv = $(".popup__person_dev").length;
    let countDiv = $(".new__div_person").length;
    newDiv.find(".number").text(firstCountDiv===1?countDiv 2:countDiv 1);
    $(".clonned__div").append(newDiv);
    newDiv.find(".removeButtonDiv").append(
        "<button style='margin-left: 150px' class='btn btn-danger text-black deleteButton'>"  
        "Remove"  
        "</button>");

    // Instantiate Select2
    newDiv.find(".childSelect").select2();
})
 

Я просто предоставляю здесь только клонированный код javascript div, а не другие функции. У меня проблема только в том, что select2 не работает после клонирования div. Спасибо.