0

我正在使用 jQuery Mobile 构建一个 Web 应用程序，并有一个允许用户添加另一行类似数据的表单。像这样的东西：

<tr>
    <td>
        <input type='text' name='item' />
    </td>
    <td>
        <input type='checkbox' name='recurring' />
    </td>
    <td> <a href="#" class="add-row">Add</a>

    </td>
</tr>

当用户单击“添加”链接时，我正在深度克隆表格行并将其附加到表格中。它复制所有样式和事件处理程序。问题当然是所有事件处理程序仍然链接到原始元素并且不更新新元素。如何从克隆的行中删除这些事件并再次绑定它们？

还是我只是走错路了？

4

1 回答 1

0

您可以通过这种方式进行绑定和取消绑定。

$('elemSelector').clone().find('.add-row').unbind('click').click(addRowHandler);

我的建议：

使用委托事件处理程序，而不是仅使用 deepclone 克隆元素并对元素执行操作unbind/bind。您可以使用on()

前任：

在你的页面初始化中 

      //...

     $('table').on('click', '.add-row', addRowHandler);

      //...

演示

基本上，您在这里尝试做的是，不是将事件附加到元素上，而是将事件附加到在任何给定时间点存在于 DOM 中的父元素（表）上，以便任何新添加的（添加行）都具有代表团提供的活动。因此，有了这个，您就可以为现在和将来的元素委派事件。

看：

事件委托

更新

根据您最近的评论，我有另一个使用模板的解决方案。

最简单的方法是创建每次克隆的行的模板，因为如果克隆现有行，它也会克隆现有的转换元素，这可能会导致您面临的问题，而不是模板行，克隆它并在何时附加它需要并调用trigger('create')以在元素上应用 JQ 移动过渡。

var template = '<tr><td><input type="text" name="item" /></td><td><label class="checkbox" data-mini="true"><input type="checkbox" name="incomeRecurring[]">Recurring</label></td><td><a href="#" class="add-row">Add</a></td></tr>';

$('table').on('click', '.add-row', function () {
     $('table tbody').append($(template).clone()).trigger('create'); //recreate the elements
});

演示

于 2013-06-30T06:34:50.017 回答