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/

再次感谢。

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

1 个答案: