Forum PHP.pl

Witam.

Zrobiłem dynamiczne dodawanie pól w formularzu (dokładnie klonowanie jego części) lecz mam problem: nie można usunąć dynamicznie dodanych elementów. Jeśli elementy zostaną utworzone statycznie (z pętli) to usuwanie działa ok.

Kod JS:

[JAVASCRIPT] pobierz, plaintext 
jQuery(document).ready(function($){ 
	$('.btnAdd').click(function() {
		var num		= $('.cloned').length;
		var newNum	= new Number(num + 1);
 
		var newElem = $('#duplicate' + num).clone().attr('id', 'duplicate' + newNum);
 
		$('#duplicate' + num).after(newElem);
 
		$('#duplicate' + newNum + ' select.fv_type').attr("id","fv_type"+newNum).val("1");
		$('#duplicate' + newNum + ' label.fv_type').attr("for","fv_type"+newNum);
		$('#duplicate' + newNum + ' input.fv_item').attr("id","fv_item"+newNum).val("");
		$('#duplicate' + newNum + ' label.fv_item').attr("for","fv_item"+newNum);
		$('#duplicate' + newNum + ' input.fv_price').attr("id","fv_price"+newNum).val("");
		$('#duplicate' + newNum + ' label.fv_price').attr("for","fv_price"+newNum);
		$('#duplicate' + newNum + ' .btnDel').attr("id",newNum);
 
		$('.btnDel').css('display','inline');
 
		if (newNum == 5)
			$('.btnAdd').css('display','none');
	});
 
	$('.btnDel').click(function() {
		var num	= $('.cloned').length;
		var del	= $(this).attr("id");
 
		$('#duplicate' + del).remove();
		$('.btnAdd').css('display','inline');
 
		if (num-1 == 1)
			$('.btnDel').css('display','none');
	});
});
[JAVASCRIPT] pobierz, plaintext 

Kod HTML w połączeniu z OPT:

[HTML] pobierz, plaintext 
{section=items_data}
	<div id="duplicate{$items_data.id}" class="cloned">
		<div class="formLabel"><label for="fv_type{$items_data.id}" class="fv_type">Typ usługi:<sup>*</sup></label></div>
		<div class="formField">
			<select id="fv_type{$items_data.id}" name="fv_type[]" class="fv_type">
				<option value="1"{if $items_data.type == '1'} selected="selected"{/if}>Hosting</option>
				<option value="2"{if $items_data.type == '2'} selected="selected"{/if}>Domena</option>
				<option value="3"{if $items_data.type == '3'} selected="selected"{/if}>Inna</option>
			</select>
		</div>
		<div class="clear_form"></div>
 
		<div class="formLabel"><label for="fv_item{$items_data.id}" class="fv_item">Usługa:<sup>*</sup></label></div>
		<div class="formField"><input type="text" class="input fv_item" id="fv_item{$items_data.id}" name="fv_item[]" value="{$items_data.product}" /></div>
		<div class="clear_form"></div>
 
		<div class="formLabel"><label for="fv_price{$items_data.id}" class="fv_price">Cena:<sup>*</sup></label></div>
		<div class="formField">
			<input type="text" class="input fv_price" id="fv_price{$items_data.id}" name="fv_price[]" style="width:200px;" value="{$items_data.price}" /><br />
			<a class="btnDel" id="{$items_data.id}"><img src='{$IMAGES}cross_circle.png' class='tip' title='Usuń usługę z faktury' alt='' /></a>
		</div>
		<div class="clear_form"><br /><br /></div>
	</div>
{/section}
<div class="formLabel">&nbsp;</div>
<div class="formField"><a class="btnAdd"><img src='{$IMAGES}icons/add.png' class='tip' title='Dodaj usługę do faktury' alt='' /></a></div>
<div class="clear_form"></div>
[HTML] pobierz, plaintext 

{$items_data.id} domyślnie przyjmuje wartość 1 i w pętli jest kolejno zwiększane.

Z góry dziękuję za pomoc.

Do głowy mi nie przyszło aby użyć .live(). Dzięki wielkie! Mam jeszcze jeden problem związany z jQuery (tym razem z koszykiem). Może też dasz radę pomóc? (IMG:style_emoticons/default/smile.gif) http://forum.php.pl/index.php?showtopic=153731

Ten post edytował Rafik 7.07.2010, 21:52:33