javascript - 出现多个字段时的 jquery 时间输入问题

Question

我在一个表单中有两个时间输入字段和两个日期字段。还有一个添加更多按钮来添加更多这样的行。时间输入插件从第二行开始不起作用。代码如下:

<link href="styles.css" rel="stylesheet"  />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript" src="http://www.jqueryscript.net/demo/jQuery-Plugin-for-Input-Field-Time-Format-Spinner-Time-Entry/jquery.timeentry.js"></script>
<link href="/css/jquery.timeentry.css" media="screen" rel="stylesheet" type="text/css" >


<script>
$(function () {

    var newRow = $(".addrows").clone();

    $(".datepicker").datepicker();
   $('.time').timeEntry({show24Hours: true, spinnerImage: '', defaultTime  : new Date()});
    $("#addButton").on("click", function () {

        newRow.clone().appendTo("#TextBoxesGroup tbody").find(".datepicker").datepicker();
    });



});

</script>
<table id="TextBoxesGroup">
<tr class="addrows">
<td>Start Time:</td>
<td>

<input type="text" name="StartTime" id="StartTime" value="" class="time">

<button name="starttimenow" id="starttimenow" type="button" onclick="var currentDate = new Date(); var hours = currentDate.getHours(); var minutes = currentDate.getMinutes(); if(hours < 10) { hours = &#39;0&#39; + hours; } if(minutes < 10) { minutes = &#39;0&#39; + minutes; } $(&#39;#StartTime&#39;).val(hours + &#39;:&#39; + minutes);">Now</button></dd>
</td>
<td>Start Date:</td>
<td><input type="text" name="StartDate[]"class="datepicker" value=""  autocomplete="off" size="6">
</td>
<td>End Time:</td>
<td>
<input type="text" name="EndTime" id="EndTime" value="" class="time">

<button name="endtimenow" id="endtimenow" type="button" onclick="var currentDate = new Date(); var hours = currentDate.getHours(); var minutes = currentDate.getMinutes(); if(hours < 10) { hours = &#39;0&#39; + hours; } if(minutes < 10) { minutes = &#39;0&#39; + minutes; } $(&#39;#EndTime&#39;).val(hours + &#39;:&#39; + minutes);">Now</button></dd>
</td>
<td>End Date:</td>
<td>
<input type="text" name="EndDate[]" class="datepicker" value="" autocomplete="off" size="6">
</td>
</tr>
</table>

<table>
    <tr>
        <td>
            <input type="button" id="addButton" value="+" />
        </td>

    </tr>
    </table>

我知道我可以将行中的“id”更改为“class”:

<input type="text" name="StartTime" id="StartTime" value="" class="time">

<input type="text" name="EndTime" id="EndTime" value="" class="time">

但是会有两个类，而且时间输入插件不能正常工作。

请帮我解决这个问题。 谢谢!

Answer 1

您的代码没有检测新添加行中的时间字段。我建议编写一个函数来检测容器元素(或多个元素)中的元素。您可以在页面加载时使用该函数来检测现有行，并且可以在添加新行时再次使用它。

而且您绝对需要避免重复的 id 值。正如您在问题中提到的，您可以改用 class 属性。

HTML:

<table id="TextBoxesGroup">
    <tr>
        <td>Start Time:</td>
        <td>
            <input type="text" name="StartTime[]" value="" class="time" />
            <button type="button" class="nowBtn">Now</button>
        </td>
        <td>Start Date:</td>
        <td>
            <input type="text" name="StartDate[]" value="" class="datepicker" autocomplete="off" size="6" />
        </td>
        <td>End Time:</td>
        <td>
            <input type="text" name="EndTime[]" value="" class="time" />
            <button type="button" class='nowBtn'>Now</button>
        </td>
        <td>End Date:</td>
        <td>
            <input type="text" name="EndDate[]" class="datepicker" value="" autocomplete="off" size="6" />
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <input type="button" id="addButton" value="+" />
        </td>
    </tr>
</table>

JavaScript:

$(function () {
    // This function instruments elements inside the container element.
    function instrument($containers) {
        $containers.find('.time').timeEntry({
            show24Hours: true,
            spinnerImage: '',
            defaultTime: new Date()
        });
        $containers.find('.datepicker').datepicker();
    }

    var $group = $('#TextBoxesGroup'),
        $rows = $group.find('tr'),
        $rowTemplate = $rows.first().clone();

    // Instrument the existing rows.
    instrument($rows);

    // Use event delegation to handle the "Now" button clicks.
    $group.on('click', '.nowBtn', function() {
        var now = new Date(),
            hours = ('0' + now.getHours()).slice(-2),
            minutes = ('0' + now.getMinutes()).slice(-2);
        $(this).parent().find('input').val(hours + ':' + minutes);
    });

    $('#addButton').click(function() {
        var $row = $rowTemplate.clone();
        $group.children('tbody').append($row);

        // Instrument the newly added row.
        instrument($row);
    });
});

您还可以在 instrument() 函数中为“现在”按钮注册点击处理程序，但我选择展示如何使用事件委托(delegate)。