1

我目前正在创建一个可以添加/删除一些行的表格。

JS 部分如下所示：

$('#absence-table').on('click', '#delete-line',function() {
    $(this).closest('tr').remove();
});

$('#add-line').click(function(e)
{
    e.preventDefault();

    $('#absence-table').append([
        '<tr>',
            '<td>',
                '<select name="absence-type" class="input-small">',
                    '<option value="t1">type1</option>',
                    '<option value="t2">type2</option>',
                '</select>',
            '</td>',
            '<td><input type="text" id="from" class="input-small" /></td>',
            '<td><input type="text" id="to" class="input-small" /></td>',
            '<td><div class="text-center"><input type="text" id="result" class="input-xsmall" /></div></td>',
            '<td><div class="text-center"><input type="checkbox" id="morning"></div></td>',
            '<td><div class="text-center"><input type="checkbox" id="afternoon"></div></td>',
            '<td colspan="2"><input type="text" id="comment" /></td>',
            '<td><a href="#" id="delete-line"><i class="icon-remove"></i></a></td>',
        '</tr>'
    ].join(''))
});

$("#from, #to").datepicker();

我的第一个问题是使 .append() 函数创建的行上的“单击”事件成为工作。经过一番搜索，我发现我需要使用 .on() 并且它可以工作。

但是创建的新表行上的日期选择器不起作用。我能怎么做？

$("#from, #to").datepicker(); // seems not working after .append() on the new line
4

2 回答 2

2

日期选择器不起作用，因为它仅将自身附加到元素上，#from并且#to当页面首次加载时，任何新行都不会应用日期选择器。

如果您向这些元素添加一个to和from类（因为元素 ID 应该是唯一的，您可以这样做：

$('#add-line').click(function(e) {
    e.preventDefault();

    $('#absence-table').append(/* Super long string */)

    // attach datepicker to new elements by targeting the last row in the table
    $("#absence-table tr:last .from, #absence-table tr:last .to").datepicker();
});

$(".from, .to").datepicker(); // attach on page load
于 2013-07-18T10:25:05.917 回答
1

您需要将datepicker插件附加到新添加的 HTML。目前它只会附加到加载时可用的元素。

$('#add-line').click(function(e) {
    e.preventDefault();

    $('#absence-table').append(/* Super long string */)

    $("#from, #to").datepicker(); // attach to new elements
});

$("#from, #to").datepicker(); // attach on load

您甚至可以通过将datepicker实例化放在一个函数中来稍微干燥一下。

于 2013-07-18T10:22:55.830 回答