Мой добавленный HTML не работает с текущим кодом jQuery - PullRequest
Новая
       83

Мой добавленный HTML не работает с текущим кодом jQuery

0 голосов
/ 23 сентября 2019

Итак, я сейчас работаю над динамической формой вставки для моего сайта.Чтобы добиться этого, я делаю кнопку, чтобы добавить новое текстовое поле, которое должно использовать плагин Select2.Как только я делаю с функцией jQuery append(), добавленный код даже не читает плагин Select2.

Я пытался использовать AJAX и поставить $() перед приложенным кодом.Но ничего не работает.

Это часть моего модального кода. 

<div class="block-content">
                    <div class="row">
                        <div class="col-12 d-flex justify-content-end align-content-end">
                            <button id="add-more-btn" class="btn btn-primary"><i class="fa fa-plus"></i>&nbsp; Add More</button>
                        </div>
                    </div>
                    <br />
                    <form method="POST" action="/driver-management/create/vehicle-category">
                    @csrf 
                    <div id="data-pointer" class="row d-none">
                        <div class="col-12">
                        <strong>Data #1</strong>
                        </div>
                    </div>
                    <div id="more-field">
                    <div class="row">
                        <div class="col-12 form-group">
                            <select class="js-select2 form-control" required name="select-category" style="width: 100%;" data-placeholder="Choose one..">
                                <option></option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
                                    @foreach($vehicle as $data)
                                    <option value="{{ $loop->iteration }}"> {{ $data->vehicle_cat_name }} </option>
                                    @endforeach
                            </select>
                        </div>
                    </div>
                    <br />
                    </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group float-right">
                                    <input type="submit" class="btn btn-outline-primary" id="Create" value="Submit">
                                    <button type="button" class="btn btn-outline-danger" data-dismiss="modal" aria-label="Close">Close</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!-- END Input Grid Sizes -->
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    let count = 0;
    $('#add-more-btn').click(function(e){
        $('#data-pointer').removeClass('d-none');
        $('#more-field').append($('<div id="data-pointer" row="row"> <div class="col-12"> <strong>Data #'+(count+1)+'</strong> </div> </div> <div class="row" id="data"> <div class="col-12 form-group"> <select class="js-select2 form-control" required id="select-category-'+count+'" name="select-category-'+count+'" style="width: 100%;" data-placeholder="Choose one.."> <option></option><!-- Required for data-placeholder attribute to work with Select2 plugin --> @foreach($vehicle as $kendaraan) <option value="{{ $loop->iteration }}"> {{ $kendaraan->vehicle_cat_name }} </option> @endforeach </select> </div> </div> <br /> '));
    });
</script>

Если вы видите на моей модальной части, есть некоторая опция выбора, которая была встроена в плагин Select2.Я ожидаю, что добавленный код будет делать то же самое, что и первый.Кстати, плагин был объявлен на главной странице и ничего плохого в этом нет.

Ответы [ 2 ]

0 голосов
/ 23 сентября 2019

Javascript и jquery применяются к объекту для определенного события.Обычно плагин вроде select2 активируется на странице готово.Когда вы добавляете новый объект на страницу, вы должны повторно активировать плагин.Вы можете сделать по-разному: - Уничтожить и повторно инициализировать плагин.Не очень элегантно, но безопасно - Инициализируйте только на новом объекте.Более элегантный и быстрый

Этот код используется для инициализации select2 на странице, готовой для всех select 

$(document).ready(function() {
    $('select').select2();
});

Вы должны вызывать select2, когда ваш аппенд останавливается с чем-то вроде этого: 

$('#data-pointer select').select2();

Примечание: добавление нового объекта с таким же идентификатором не рекомендуется.

0 голосов
/ 23 сентября 2019

Вы можете destroy выбрать 2 перед добавлением с помощью 

$(".js-select2").select2('destroy'); //

и после добавления повторно инициализировать с помощью 

 $('.js-select2').select2({ width: '100%', placeholder: "Select an Option", allowClear: true });
...