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:
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');
});
});
Kod HTML w połączeniu z OPT:
{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> <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> <div class="clear_form"></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>
<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> {/section}
<div class="formLabel"> </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>
{$items_data.id} domyślnie przyjmuje wartość 1 i w pętli jest kolejno zwiększane.
Z góry dziękuję za pomoc.