jquery - 在 .append() 之后向对象添加方法

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 的元素，任何新行都不会'没有应用日期选择器。

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