Question

我正在创建一个表格，其中可以添加/删除某些行。

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（）函数创建的行上创建“click”事件。经过一些搜索，我发现我需要使用.on（）并且它可以工作。

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

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

Answer 1

日期选择器不起作用，因为它只在首次加载页面时将自身附加到#from和#to的元素，任何新行都不会应用datepicker。

如果您为这些元素添加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

Answer 2

您需要将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实例来干掉它。

在.append（）之后向对象添加方法

2 个答案: