使用 Jquery 添加新输入会中断工具提示

Question

我正在写一个表单，我必须让用户根据需要添加尽可能多的行。如您所见，我的输入被视为数组，以便稍后将数据保存到数据库中。（这对我来说又是一件新鲜事）

$(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>

一切看起来都很完美，但是当用户添加新行并与范围输入交互时，这不会向用户反馈 he/she 正在选取的值。只有原始的才会有工具提示。

经过一些测试，它甚至会影响 'tooltipped' class 用于显示任何元素的工具提示。

这就是codepen，一切准备就绪，向您展示问题所在

如何重现：

在提供的代码笔中，您会看到蓝色十字，当您点击它时，将添加一个新行。

尝试第一个范围输入，它会在工具提示上显示值。

在后面添加的范围输入中，不会。

感谢您的阅读，祝您愉快。

Answer 1

您应该重新初始化 range 元素。

只需添加此代码

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

之后

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

Answer 2

首先，它不是 range 输入的工具提示...它是 Materialize nouiSlider 效果。所以你必须在新元素上初始化它。

M.Range.init(element);

对了，我没发现这个具体是documentation about range... But I got inspired by this other initialisation example.

CodePen updated

使用 Jquery 添加新输入会中断工具提示

Adding new input using Jquery breaks tooltips

html

javascript

css

jquery

materialize