克隆表單元素的最佳方法jQuery Mobile？

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中的任何給定時間點的父元素（表）上，以便任何新添加的（添加行）都可以通過delegatio ñ。因此，有了這個，您就可以爲現在和將來的元素授予事件。

參見：

event-delegation

更新

根據您的後期評論，我一直在使用模板anothe R染料溶液。

最簡單的方法是創建一個要克隆的行的模板，因爲如果克隆現有的行，它也會克隆現有的轉換元素，這可能會導致您面臨的問題，而不是模板行，將其克隆並在需要時附加，並致電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