重复组jQuery中的重复字段

Question

有谁知道如何复制重复组中的字段？ 我尝试使用recopy jQuery，但它没有按预期工作。

这是我的克隆字段： 如果我点击添加Text1，它应该克隆可重复的字段。 但它重复只有removelink！ 希望这些信息足够你。

＆＃13;

＆＃13;

$(function(){
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">Delete</a>';

$('a.add').relCopy({ append: removeLink});
});

/**
 * jQuery-Plugin "relCopy"
 * 
 * @version: 1.1.0, 25.02.2010
 * 
 * @author: Andres Vidal
 *          code@andresvidal.com
 *          http://www.andresvidal.com
 *
 * Instructions: Call $(selector).relCopy(options) on an element with a jQuery type selector 
 * defined in the attribute "rel" tag. This defines the DOM element to copy.
 * @example: $('a.copy').relCopy({limit: 5}); // <a href="example.com" class="copy" rel=".phone">Copy Phone</a>
 *
 * @param: string	excludeSelector - A jQuery selector used to exclude an element and its children
 * @param: integer	limit - The number of allowed copies. Default: 0 is unlimited
 * @param: string	append - HTML to attach at the end of each copy. Default: remove link
 * @param: string	copyClass - A class to attach to each copy
 * @param: boolean	clearInputs - Option to clear each copies text input fields or textarea
 * 
 */

(function($) {

	$.fn.relCopy = function(options) {
		var settings = jQuery.extend({
			excludeSelector: ".exclude",
			emptySelector: ".empty",
			copyClass: "copy",
			append: '',
			clearInputs: true,
			limit: 0 // 0 = unlimited
		}, options);
		
		settings.limit = parseInt(settings.limit);
		
		// loop each element
		this.each(function () {
			
			// set click action
			$(this).click(function (){
				var rel = $(this).attr('rel'); // rel in jquery selector format				
				var counter = $(rel).length;
				
				// stop limit
				if (settings.limit != 0 && counter >= settings.limit){
					return false;
				};
				
				var master = $(rel+":first");
				var parent = $(master).parent();						
				var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append);
				
				//Remove Elements with excludeSelector
				if (settings.excludeSelector){
					$(clone).find(settings.excludeSelector).remove();
				};
				
				//Empty Elements with emptySelector
				if (settings.emptySelector){
					$(clone).find(settings.emptySelector).empty();
				};								
				
				// Increment Clone IDs
				if ( $(clone).attr('id') ){
					var newid = $(clone).attr('id') + (counter +1);
					$(clone).attr('id', newid);
				};
				
				// Increment Clone Children IDs
				$(clone).find('[id]').each(function(){
					var newid = $(this).attr('id') + (counter +1);
					$(this).attr('id', newid);
				});
				
				//Clear Inputs/Textarea
				if (settings.clearInputs){
					$(clone).find(':input').each(function(){
						var type = $(this).attr('type');
						switch(type)
						{
							case "button":
								break;
							case "reset":
								break;
							case "submit":
								break;
							case "checkbox":
								$(this).attr('checked', '');
								break;
							default:
							  $(this).val("");
						}						
					});					
				};
				
				$(parent).find(rel+':last').after(clone);
				
				return false;
				
			}); // end click action
			
		}); //end each loop
		
		return this; // return to jQuery
	};
	
})(jQuery);

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<p class="clone1"> 
<p class="clone"> 

<label for="beschreibung">Wähle:</label>
		<select name="Wähle[]">
  			<option value="3">3</option>
  			<option value="2">2</option> 
 			<option value="1">1</option>
		</select><br />

<label for="beschreibung">Text:</label><textarea type="text" rows="5" cols="48" name="Text[]" /></textarea><br /><br />
</p>

<p><a href="#" class="add" rel=".clone">add Text</a></p>

</p>

<p><a href="#" class="add" rel=".clone1">add Text1</a></p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

1. 如果可以避免使用jQuery，请不要使用内联事件处理程序。它无理由地将事件注册与事件处理程序分开（并且您错过了其他很酷的jQuery事件功能）。如果动态添加项目，请使用委托事件处理程序，附加到不变的祖先元素。

e.g。

$(document).on('click', '.remove', function(e){
    e.preventdefault();
    $(this).parent().slideUp(function(){ $(this).remove() });
});

这会侦听事件冒泡到文档（如果没有其他更接近/方便的话，这是最好的默认值）。然后它应用jQuery选择器，因此项目只需要在事件时匹配！非常适合动态元素。

1. 您无法嵌套段落标记。我为这个例子用div（可以嵌套）替换它们。

JSFiddle：http://jsfiddle.net/xbz9b61c/

1. 您实际的解决方案很难确定，因为您正在克隆现有项目而不是隐藏/模板项目。这意味着您可能会克隆克隆和多个克隆。如果您能更清楚地解释最终结果，我可能会提供更清晰的建议：）