jQuery clone() 和 append()答案

【问题标题】：JQuery clone() and append()jQuery clone() 和 append()
【发布时间】：2012-09-25 10:34:27
【问题描述】：

我有一张简单的桌子：

<table id='table_actions'">
    <tbody class='actions_body'>
        <tr>
            <td colspan=2 class="taskname"><strong>1. </strong><span name='taskname'>name</span></td>
        </tr>
        <tr>
            <td>Действие: </td>
            <td>
                <select name='action_action'>
                    <option value="1">Consult</option>
                    <option value="2">Activate</option>
                    <option value="3">Connect</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><button id='addaction' class="btn">Добавить действие</button></td>
            <td></td>
        </tr>
    </tbody>
</table>

还有JQuery代码：

$('#addaction').click(function() {
    $('.actions_body tr:not(:last)').clone()
      .insertBefore($('#table_actions tr:last'));
});

$('select[name=action_action]').change(function() {
    alert();
});

我的问题：通过更改表的克隆部分中的选择，没有警报。

【问题讨论】：

这段代码没有错误

标签： jquery html dom clone

【解决方案1】：

问题是因为更改事件绑定在页面加载时，而克隆的元素显然当时不存在。您需要将事件处理程序委托给父级。试试这个：

$('#table_action').delegate('select[name=action_action]', 'change', function() {
    alert();
});

或者，您可以将布尔参数传递给clone() 以克隆带有附加事件的元素。

【讨论】：

【解决方案2】：

使用withDataAndEvents布尔参数：

$('.actions_body tr:not(:last)').clone(true)

.clone( [withDataAndEvents] )

withDataAndEvents 一个布尔值，指示是否应将事件处理程序与元素一起复制。

docs

【讨论】：