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>

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

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

这是codepen，已经准备好向您显示问题了

如何复制它：

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

播放第一个范围输入，它将在工具提示上显示您的值。

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

感谢您阅读，祝您愉快。

Answer 1

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

只需添加此代码

transform(df, first = as.Date(year_mon), last = as.Date(year_mon, frac = 1))

在此之后

   year_mon      first       last
1  Aug 2015 2015-08-01 2015-08-31
2  Sep 2015 2015-09-01 2015-09-30
3  Oct 2015 2015-10-01 2015-10-31
4  Nov 2015 2015-11-01 2015-11-30
5  Dec 2015 2015-12-01 2015-12-31
6  Jan 2016 2016-01-01 2016-01-31
7  Feb 2016 2016-02-01 2016-02-29
8  Mar 2016 2016-03-01 2016-03-31
9  Apr 2016 2016-04-01 2016-04-30
10 May 2016 2016-05-01 2016-05-31

Answer 2

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

M.Range.init(element);

顺便说一句，我没有发现这个特定的是documentation about range ...但是我受到this other initialisation example的启发。

CodePen updated

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

2 个答案: