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

Question

我正在编写表单，必须让用户根据需要添加任意多的行。 如您所见，我的输入被视为数组，以后将数据保存到DB。 （对我来说这将是另一件事）

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

一切看起来都很完美，但是当用户添加新行并与范围输入进行交互时，这不会反馈用户有关他/她选择的值的信息。 只是原始的将具有工具提示。

经过一些测试，它甚至会影响“工具提示”类，该类通常用于在任何元素上显示工具提示。

这是代码库，已经准备好向您显示问题

如何复制它：

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

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

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

谢谢您的阅读，祝您有愉快的一天。

Answer 1

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

只需添加此代码

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

在这之后

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

Answer 2

首先，它不是该range输入的工具提示，而是Materialize nouiSlider效果。 因此，您必须在新元素上进行初始化。

M.Range.init(element);

顺便说一句，我没有发现这是有关范围的文档。但是我从另一个初始化示例中得到了启发。

CodePen已更新

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-03-09 18:30:25

解决方案2
1 2019-03-09 18:31:41

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-03-09 18:30:25

解决方案2 1 2019-03-09 18:31:41

解决方案1
1 已采纳 2019-03-09 18:30:25

解决方案2
1 2019-03-09 18:31:41