在jquery中添加HTML中的动态行字段

Question

我正在尝试开发一种功能，可以在表单中添加动态字段。现在，这将复制一个现有字段，然后再复制它

/**
* This function is used to dynamically add or remove rows from an unordered List
**/
//For Dynamically Adding and Deleting the rows and columns
$('.addRow').click(function (e) {
// This gets the number of textboxes
var curMaxInput = $(this).closest('ul').find('input:text').length;
//Clones the first row.
var html = $(this).closest('ul').first().clone(true);
//for every textbox the 
html.find('input:text').each(function () {
$(this).attr('id', $(this).attr('name') + '[' + (curMaxInput++) + ']');            
});
//Converting the '+' sign to '-' 
html.find('span').removeClass('addRow').removeClass('ui-icon-plus').addClass('ui-icon-minus').addClass('removeRow');
//Adding the onClick event to remove this row
html.find('span').on('click', function () {
$(this).parent().remove();
return false;
});
// appending the html to the list and thus making it dynamic
$(this).closest('ul').append(html.find('li').first());
//avoiding Post backs if any
return false;
});

​

我可以复制它，但我可以克隆事件并将其附加到生成的新动态行字段。但现在，当我试图删除副本时，它不会删除。如果你需要更多的信息，请告诉我。这是jsfiddler链接，以防你们需要更多信息http://http://jsfiddle.net/jshah11/QavKj/3/

我已经根据评论更新了功能，并用它更新了jsfiddler

Answer 1

感谢大家的帮助。我能够开发该功能。这是一个函数，可以用来添加和删除动态行字段。

/**
* This function is used to dynamically add or remove rows from a un-ordered List
**/
//For Dynamically Adding and Deleting the rows and columns
$('.addRow').click(function(e) {
// This gets the number of textboxes
var curMaxInput = $(this).closest('ul').find('input:text').length;
//Clones the first row.
var html = $(this).closest('ul').first().clone(true);
//for every textbox the 
html.find('input:text').each(function() {
$(this).attr('id', $(this).attr('name') + '[' + (curMaxInput++) + ']');
});
//Converting the '+' sign to '-' 
html.find('span').removeClass('addRow').removeClass('ui-icon-plus').addClass('ui-icon-minus').addClass('removeRow');
//Turn off the current event
html.find('span').off('click');
//Adding the onClick event to remove this row
html.find('span').on('click', function() {
$(this).parent().remove();
return false;
});
// appending the html to the list and thus making it dynamic
$(this).closest('ul').append(html.find('li').first());
//avoiding Post backs if any
return false;
});​

以下是jsFiddler链接，供您参考该函数http://jsfiddle.net/jshah11/QavKj/4/

再次感谢。