重复组jQuery中的重复字段

Duplicate Fields within Duplicate Groups jQuery

本文关键字:字段 jQuery      更新时间:2024-07-05

有人知道如何在重复组中复制字段吗?我用recopy jQuery进行了尝试,但没有如预期的那样工作。

这是我的克隆字段:如果我点击add Text1,它应该会克隆可复制的字段。但它只复制了removelink!希望这些信息对你来说已经足够了。

$(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);
<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>

  1. 如果可以避免的话,不要在jQuery中使用内联事件处理程序。它将您的事件注册的事件处理程序无故分离(并且您错过了其他很酷的jQuery事件功能)。如果项是动态添加的,请使用附加到不更改的祖先元素的委派事件处理程序

例如

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

这将侦听事件是否冒泡到文档中(如果没有其他更接近/方便的内容,则这是最佳默认设置)。然后它应用jQuery选择器,因此项目只需要在事件时匹配!非常适合动态元素。

  1. 不能嵌套段落标记。在这个例子中,我用div(可以嵌套)替换了它们

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

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