Question

我正在使用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>

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

或者我只是采取了错误的方式？

Answer 1

你可以用这种方式绑定和取消绑定。

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

我的建议：

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

执行此操作

EX：

在你的pageinit

      //...

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

      //...

<强> Demo

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

请参阅：

<强> event-delegation

的更新 的

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

最简单的方法是每次都要创建要克隆的行的模板，因为如果克隆现有行，它将克隆现有的已转换元素，这可能会导致您遇到的问题，而是模拟行，克隆它和在需要时附加它并调用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 });

<强> Demo

克隆表单元素jQuery Mobile的最佳方法是什么？

1 个答案: