Добавление нового ввода с помощью всплывающих подсказок Jquery breaks - PullRequest
Новая
       7

Добавление нового ввода с помощью всплывающих подсказок Jquery breaks

0 голосов
/ 09 марта 2019

Я пишу форму, и я должен позволить пользователю добавлять столько строк, сколько требуется. Как видите, мои входные данные обрабатываются как массивы для последующего сохранения данных в БД. (Это будет еще одна новая вещь для меня) 

$(document).ready(function() {
        var maxField = 10; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        var fieldHTML = '<tr> <td><input type="text" id="NombreProyecto" name="NombreProyecto[]"></td> <td><input type="text" id="Descripcion" name="Descripcion[]"></td> <td><input type="text" id="AplicacionesProyecto" name="AplicacionesProyecto[]"></td> <td style="width: auto"> <div class="range-field "> <input type="range"  name="NivelTRL[]" min="1" value="1" max="9" /> </div> </td> </tr>'; //New input field html 
        var x = 1; //Initial field counter is 1
        //Once add button is clicked
        $(addButton).click(function() {
            //Check maximum number of input fields
            if (x < maxField) {
                x++; //Increment field counter
                $(wrapper).append(fieldHTML); //Add field html
            }
        });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body>
        <div class="step-content">
            <div class="container">
                <div id="table" class="table-editable ">
                    <table class="table field_wrapper">
                        <tr>
                            <th>Nombre</th>
                            <th>Descripción</th>
                            <th>Aplicaciones</th>
                            <th>Nivel TRL</th>
                            <th><a href="javascript:void(0);" class="add_button tooltipped" data-position="right" data-tooltip="Add new row"><i class="material-icons">add</i></a>
                            </th>
                        </tr>
                        <tr class="">
                            <td><input type="text" id="NombreProyecto" name="NombreProyecto[]"></td>
                            <td><input type="text" id="Descripcion" name="Descripcion[]"></td>
                            <td><input type="text" id="AplicacionesProyecto" name="AplicacionesProyecto[]"></td>
                            <td>
                                <div class="range-field">
                                    <input type="range" name="NivelTRL[]" min="1" value="1" max="9" />
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
    </html>

Все выглядит идеально, но когда пользователь добавляет новую строку и взаимодействует с вводом диапазона, это не будет отзывать пользователя о значении, которое он / она выбирает. Просто оригинал будет иметь всплывающую подсказку.

После некоторого тестирования он даже влияет на класс «всплывающих подсказок», который используется для отображения всплывающих подсказок над любым элементом.

Это кодовая ручка , все готово показать вам проблему

Как это воспроизвести:

В предоставленном коде вы увидите синий крестик, когда вы щелкнете по нему, будет добавлен новый ряд.

Поиграйте с первым вводом диапазона, он покажет вам значение во всплывающей подсказке.

В последующем добавленном вводе диапазона это не будет.

Спасибо за чтение, хорошего дня.

Ответы [ 2 ]

1 голос
/ 09 марта 2019

Во-первых, это не всплывающая подсказка на входе range ... Это эффект Materialize nouiSlider . Таким образом, вы должны инициализировать это на новом элементе. 

M.Range.init(element);

Кстати, я не обнаружил, что это специфическая документация о диапазоне ... Но я получил вдохновленный от этого другого примера инициализации .

Обновление CodePen

1 голос
/ 09 марта 2019

Вы должны заново установить элементы range.

Просто добавьте этот код 

M.Range.init($('input[type=range]'));

после этого 

$(wrapper).append(fieldHTML); //Add field html
...