2

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

/**
* 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;
});

​</p>

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

我已经根据评论更新了函数，并用它更新了 jsfiddler

4

1 回答 1

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;
});​

Here is the jsFiddler link for your references for this function http://jsfiddle.net/jshah11/QavKj/4/

Thanks again.

于 2012-12-05T16:16:12.923 回答